Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
图片放大跟随鼠标移动
$(document.body).append('<div id="zoom" style="background-image:'+$(this).css('background-image')+'"></div>');
var $offset = $slidea.offset();
$('#zoom').css({'width':$slidea.width(),'height':$slidea.height(),'left':$offset.left,'top':$offset.top});
$('#zoom').animate({left:0,top:0,bottom:0,right:0,height:'100%',width:'100%'}, 500, function() {
var $source = $('#zoom'),
offset = $source.offset(),
sourceWidth = $source.outerWidth(),
sourceHeight = $source.outerHeight(),
xRatio = ($img[0].naturalWidth - sourceWidth) / sourceWidth,
yRatio = ($img[0].naturalHeight - sourceHeight) / sourceHeight;
$('#zoom').mousemove(function(e) {
var left = (e.pageX - offset.left),
top = (e.pageY - offset.top);
top = Math.max(Math.min(top, sourceHeight), 0);
left = Math.max(Math.min(left, sourceWidth), 0);
$(this).css({'background-size':'initial','background-position-x':(left * -xRatio),'background-position-y':(top * -yRatio)});
});
$('#zoom').click(function(){
$(this).animate({opacity:0}, 500, function() {
$(this).remove();
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment