Javascript 实现放大镜效果实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript 实现放大镜效果实例详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4818字,纯文字阅读大概需要7分钟。
内容图文
![Javascript 实现放大镜效果实例详解](/upload/InfoBanner/zyjiaocheng/349/bd7e1443a75b44cb8e6d604376de1443.jpg)
Javascript 实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!
<div id="pic_wrap"> <div id="float_box"></div> <img src="1.jpg"> </div> <div id="show"> <img src="1.jpg" id="big_img"> </div>
最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!
img { width: 250px; height: 150px; } #pic_wrap { position: relative; width: 250px; height: 150px; } #float_box { width: 100px; height: 100px; background-color: green; filter: opacity(alpha: 30); opacity: 0.3; position: absolute; display: none; } #big_img { background-image: url(1.jpg); height: 450px; width: 750px; background-repeat: no-repeat; background-size: cover; position: relative; } #show { width: 300px; height: 300px; background-color: white; opacity: 1; filter: opacity(alpha:1); overflow: hidden; display: none; }
HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!
第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。
第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。
第三步,当鼠标完全移除后,需要加onmouseout事件。
第四步,onmouseover事件需要让放大镜和可视窗口显示出来。
第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。
第六步,onmouseout时间,让放大镜和可是窗口消失!
完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*body { margin: 0; padding: 0; }*/ img { width: 250px; height: 150px; } #pic_wrap { position: relative; width: 250px; height: 150px; } #float_box { width: 100px; height: 100px; background-color: green; filter: opacity(alpha: 30); opacity: 0.3; position: absolute; display: none; } #big_img { background-image: url(1.jpg); height: 450px; width: 750px; background-repeat: no-repeat; background-size: cover; position: relative; } #show { width: 300px; height: 300px; background-color: white; opacity: 1; filter: opacity(alpha:1); overflow: hidden; display: none; } </style> </head> <body> <div id="pic_wrap"> <div id="float_box"></div> <img src="1.jpg"> </div> <div id="show"> <img src="1.jpg" id="big_img"> </div> <script src="等比放大镜.js"></script> <script type="text/javascript"> var pic_wrap = document.getElementById('pic_wrap'), float_box = document.getElementById("float_box"), show = document.getElementById('show'); big_img = document.getElementById("big_img"); //鼠标移入事件,让放大镜和放大区显示! pic_wrap.onmouseover = function() { float_box.style.display = "block"; show.style.display = "block"; } //鼠标不断移动时触发,实时更新放大镜得到的图片 pic_wrap.onmousemove = function(event) { floatMove(float_box, pic_wrap, event); showPic(); } //鼠标移出后,放大镜和放大区隐藏 pic_wrap.onmouseout = function() { float_box.style.display = "none"; show.style.display = "none"; } //由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr! function getStyle(obj, attr) { if (window.currentStyle) { return parseInt(obj.currentStyle[attr]); } else { return parseInt(getComputedStyle(obj,null)[attr]); } } //运动框架,控制放大镜在原图中的位置! function floatMove(argu1, argu2, event) { var e = event ||window.event; var minLeft = getStyle(argu1, "width"); var maxLeft = getStyle(argu2, "width") - minLeft/2; var minHeight = getStyle(argu1, "height"); var maxHeight = getStyle(argu2, "height") - minHeight/2; console.log(maxLeft); console.log(maxLeft - minLeft/2); if (e.clientX < minLeft/2) { float_box.style.left = "0px";//防止放大镜超出左边框 } else if (e.clientX > maxLeft) { float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框 } else { float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动 } if (e.clientY < minHeight/2) { float_box.style.top = "0px"; //防止放大镜超出上边框 } else if (e.clientY > maxHeight) { float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框 } else { float_box.style.top = event.clientY - minLeft/2 + "px"; } } //用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域 function showPic() { var iCurLeft = getStyle(float_box,"left"); var iCurTop = getStyle(float_box,"top"); var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width"); var b = getStyle(big_img,"width") - getStyle(show,"width"); var moveWidth = -(iCurLeft/a)*b; big_img.style.left = moveWidth + "px"; var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height"); var d = getStyle(big_img,"height") - getStyle(show,"height"); var moveHigth = -(iCurTop/c)*d; big_img.style.top = moveHigth + "px"; } </script> </body> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
内容总结
以上是互联网集市为您收集整理的Javascript 实现放大镜效果实例详解全部内容,希望文章能够帮你解决Javascript 实现放大镜效果实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。