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 我们一起学前端!
原图:
由于原图是竖着的,所以代码里有了针对竖图的处理。。。
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-