用javascript实现淘宝放大镜效果

HTML：

<div class="zh-content zh-scrollbar">

<img class="zh-plane-profile" src="" alt="">

</div>

CSS:

zh-content{position: relative;}

.zh-plane-profile{position: absolute;z-index: 2;height: 420%;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-90deg);}

JS：

// 放大镜

function magnifyGlass(bigImg) {

// 放大镜元素

var mgEleId = 'zh_magnify_glass',

mgEleWth = 200,

mgEleHgt = 200;

var mgEle = $('<div id="'+mgEleId+'"></div>');

mgEle.css({

position: 'fixed',

zIndex: 99999,

width: mgEleWth,

height: mgEleHgt,

border: '1px solid #3C7FCD',

borderRadius: '50%',

transform: 'rotate(-90deg)',

overflow: 'hidden'

});

// 大图

var bigImgEle = $('<img src="'+bigImg+'" />');

bigImgEle.css({

position: 'absolute',

zIndex: 2,

left: 0,

top: 0

});

// 大图加载完成

bigImgEle[0].onload = function() {

var bigImgWth = this.width,

bigImgHgt = this.height;

mgEle.append(bigImgEle);

// 事件

$('.zh-plane-profile').mouseenter(function(e) {

var imgWth = $(this).height(),

imgHgt = $(this).width(),

imgOffetLeft = $(this).offset().left,

imgOffetTop = $(this).offset().top;

mgEle.css({

left: e.clientX-mgEleWth/2,

top: e.clientY-mgEleHgt/2

});

if($('#'+mgEleId).size() == 0) {

$('body').append(mgEle);

}

// 事件

$(document).on('mousemove', function(e) {

var endX = e.clientX,

endY = e.clientY;

if(endX<imgOffetLeft || endX>imgWth+imgOffetLeft || endY<imgOffetTop || endY>imgHgt+imgOffetTop) {

$('#'+mgEleId).remove();

$(document).off('mousemove');

} else {

var translateX = -(endX-imgOffetLeft)/imgWth*bigImgHgt+mgEleWth/2,

translateY = -(bigImgWth-(endY-imgOffetTop)/imgHgt*bigImgWth-mgEleHgt/2);

$('#'+mgEleId).css({

left: endX-mgEleWth/2,

top: endY-mgEleHgt/2

});

$('#'+mgEleId+' img').css({

transform: 'translate('+translateY+'px, '+translateX+'px)'

});

}

});

});

}

}