js代码实现放大镜效果

每当打开淘宝，天猫等pc端时，看到心仪的物品时，点击图片时，便呈现出放大的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解。如下图展示所见：

很是常见，在此记载一下，毕竟好记性不如烂笔头。

主要事件:

onmouseout
onmouseover
onmousemove

这种实现也是比较简单的，代码如下所示：

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>放大镜</title>

     <style>

         * {

             margin: 0;

             padding: 0

         }

         #demo {

             display: block;

             width: 400px;

             height: 255px;

             margin: 50px;

             position: relative;

             border: 1px solid #ccc;

         }

         #small-box {

             position: relative;

             z-index: 1;

         }

         #float-box {

             display: none;

             width: 160px;

             height: 120px;

             position: absolute;

             background: #ffffcc;

             border: 1px solid #ccc;

             filter: alpha(opacity=50);

             opacity: 0.5;

         }

         #mark {

             position: absolute;

             display: block;

             width: 400px;

             height: 255px;

             background-color: #fff;

             filter: alpha(opacity=0);

             opacity: 0;

             z-index: 10;

         }

         #big-box {

             display: none;

             position: absolute;

             top: 0;

             left: 460px;

             width: 400px;

             height: 300px;

             overflow: hidden;

             border: 1px solid #ccc;

             z-index: 1;;

         }

         #big-box img {

             position: absolute;

             z-index: 5

         }

     </style>

     <script>

         //页面加载完毕后执行

         window.onload = function () {

             var objDemo = document.getElementById("demo");

             var objSmallBox = document.getElementById("small-box");

             var objMark = document.getElementById("mark");

             var objFloatBox = document.getElementById("float-box");

             var objBigBox = document.getElementById("big-box");

             var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

             objMark.onmouseover = function () {

                 objFloatBox.style.display = "block"

                 objBigBox.style.display = "block"

             }

             objMark.onmouseout = function () {

                 objFloatBox.style.display = "none"

                 objBigBox.style.display = "none"

             }

             objMark.onmousemove = function (ev) {

                 var _event = ev || window.event;  //兼容多个浏览器的event参数模式

                 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;

                 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                 //设置边界处理，防止移出小图片

                 if (left < 0) {

                     left = 0;

                 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {

                     left = objMark.offsetWidth - objFloatBox.offsetWidth;

                 }

                 if (top < 0) {

                     top = 0;

                 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {

                     top = objMark.offsetHeight - objFloatBox.offsetHeight;

                 }

                 objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言

                 objFloatBox.style.top = top + "px";

                 //求其比值

                 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);

                 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                 //方向相反，小图片鼠标移动方向与大图片相反，故而是负值

                 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";

                 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";

             }

         }

     </script>

 </head>

 <body>

     <div id="demo">

         <div id="small-box">

             <div id="mark"></div>

             <div id="float-box"></div>

             <img src="img/macbook-small.jpg"/>

         </div>

         <div id="big-box">

             <img src="img/macbook-big.jpg"/>

         </div>

     </div>

 </body>

 </html>

这里面需要区别的是offsetLeft和style.left：

offsetLeft 获取的是相对于父对象的左边距；left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距；

offsetLeft返回的数值，而style.left则返回的是字符串；
offsetLeft是只读的，style.left可读写的；
style.left的值需要事先定义，否则取到的值为空，而且必须要定义在html里，如果写在样式里面，是取不出它的值的；

这是这个代码的要点之一，另外一个就是去要计算其比例。根据对应比例，进行代码的显示。

另外，小图片和大图片的显示，移动方向是相反的，所以比例前面会乘以一个负号。这个需要注意。

巴特西

js代码实现放大镜效果

最新文章

热门文章