jquery2014-07-31 03:35:08 7756
在图片上加入放大镜的效果可以给用户带来不一样的体验,丰富网页。所以也被广泛的用于网页中,其实实现放大镜效果难度并不是很大,下面介绍下怎样利用Jquery在网页中实现放大镜的效果。
需要2张图片(一大一小)和2个html div元素,第一个用来加载小图,第二个用来加载小图局部的放大的图片。
css代码:
#Main { width: 240px; height: 350px; border: 1px solid #fff; background-image: url(imgS.jpg); margin: 0 auto; margin-top: 100px; } #child { position: absolute; width: 100px; height: 100px; border: 1px solid #fff; background-image: url(imgB.jpg); background-position: 0px 0px; cursor: pointer; }
html代码:
<div id="Main"> <div id="child"></div> </div>
javascript代码(需要引入Jquery文件):
$(document).ready(function(e) { var flag = false; $("#Main").hover(function() { flag = true; }); $(this).mousemove(function(e) { if (flag == false) return; var x = e.clientX - $("#Main").offset().left-50; var y = e.clientY - $("#Main").offset().top-50; if (x >= 0 && x <= 140) { $("#child").css("margin-left", x "px"); $("#child").css("background-positionX", -x * 2 "px"); } if (y >= 0 && y <= 250) { $("#child").css("margin-top", y "px"); $("#child").css("background-positionY", -y * 2 "px"); } }, function() {}); });
这样就实现了一个简单的放大镜效果。
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery放大镜效果,jq放大镜实现,html放大镜,图片放大镜
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NjM=.html
上一篇 ASP.NET生成二维码
下一篇 Jquery3D幻灯片轮换