用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)'
});
}
});
});
}
}
調用：
magnifyGlass('大圖url');個人點睛
如果說之情的CSS是界面的美化，那麼JS讓界面可以舞動起來，JS不但可以動態對HTML進行操作，還能動態添加
或者改變CSS的樣式，合理的使用JS會使頁面變得更加生動，可以表達出十分強悍的效果。動靜結合，使網頁更加靈活漂亮。
如果你在學習前端的過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入 前端學習交流qun：615496236 我們一起學前端！
原圖：
由於原圖是豎著的，所以代碼裡有了針對豎圖的處理。。。