这篇文章给大家分享的是有关js如何自制图片放大镜功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
目前创新互联已为上1000+的企业提供了网站建设、域名、网络空间、网站托管运营、企业网站设计、东西湖网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
具体内容如下
注释：
small img size：600x400
big img size：1200x800
原理：
1、大图是小图的 2倍整
2、大图以小图片中心点为中心
a.transform : translate(-50%,-50%)
b.(rate-0.5)*50%
c.clip : rect(t,r,b,l) 以小图边界为边界
3、rect必须有absolute
4、获取鼠标在图片中的位置
a.获取鼠标位置 XY
b.获取图片位置、宽度、高度
i.得到鼠标在图片的百分比位置
ii.将百分比位置应用于大图 left，top
问题：
居中理解太差：
absolute ,left ,top,right,bottom,margin
放大缩小问题：
起初： transform： scale() 缩放
利用 transition 过渡
结果，采用这种方法会使得鼠标移动时很卡顿
可能原因：每次hover 都会触发 transition事件
解决方法：采用了 Animate 动画来实现缩放
细节：
以 onmouse 事件 e 动态获得 e.pageX 和 e.pageY
以 $().offset().top /left 获取图片位置
以 $().width() /height() 获取图片宽高
在错误的操作中也忘了获取 class 的方法
$().attr("class")
$().prop("class")
event.traget.className
如果要实现 hover出现 透明的块状就在外部 opacity:0.5; 设置z-index就可以了。
WEBGOD
#warpper{
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1;
width: 600px;
height: 400px;
}
.small{
text-align: center;
}
.big{
display: none;
clip: rect(200px,900px,600px,300px);
position: absolute;
width: 1200px;
height: 800px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.big img{
position: absolute;
width: 600px;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
