js如何自制图片放大镜功能-创新互联
这篇文章给大家分享的是有关js如何自制图片放大镜功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
旌德网站建设公司创新互联建站,旌德网站设计制作,有大型网站制作公司丰富经验。已为旌德上千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的旌德做网站的公司定做!具体内容如下
注释: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
感谢各位的阅读!关于“js如何自制图片放大镜功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:js如何自制图片放大镜功能-创新互联
转载来于:http://pwwzsj.com/article/dseddd.html