使用原生JS实现放大镜功能

github地址 : https://github.com/yYohao/JSDemo

效果如下图所示：

 

1.HTML布局

       布局采用一个大的div和三个子div，大div大小和左上角有边框的div相等，定义最大div的id为box，有边框的div为smallbox,右边大图的div为bigbox，下面三张图片的整体div为list.(下面以id指代各个div)。smallbox中的指示标采用span。

       smallbox和bigbox预先只放入一张图片，设置small_box的定位position为relative。bigbox和list为absolute。位置和大小取决于图片和个人喜好。

       smallbox中的标记和bigbox需要隐藏起来。

2.JS

      2.1 获取各个标签的dom

      2.2 对list中图片的监听，改变smallbox中的图片

      遍历list中的图片，这是鼠标进入监听

for (var i=0; i

      由于同步异步问题，改变图片需要使用闭包。（具体内部原理不是特别理解）

      2.3 对smallbox中的图片进行鼠标监听

      当鼠标进入smallbox中（onmouseover），显示标记和大图。

        mark.style.display = "block";

        big_box.style.display = "block";

      在此函数中，监听鼠标移动（onmousemove）:

      鼠标移动，获取事件event

 

small_box.onmousemove = function (event) {
                var e = event || window.event;  //兼容
                
                //获取鼠标距离smallbox左边的距离 - 半个标记的长宽
                var mouseX = e.clientX - box.offsetLeft - mark.offsetWidth * 0.5;
                var mouseY = e.clientY - box.offsetTop - mark.offsetHeight * 0.5 ;

                //边界监测，在鼠标超出边界时的处理
                if (mouseX < 0){
                    mouseX = 0;
                }else if (mouseX >= small_box.offsetWidth - mark.offsetWidth){
                    mouseX = small_box.offsetWidth - mark.offsetWidth;
                }

                if (mouseY < 0){
                    mouseY = 0;
                }else if (mouseY >= small_box.offsetHeight - mark.offsetHeight){
                    mouseY = small_box.offsetHeight - mark.offsetHeight;
                }
                //让标记动起来
                mark.style.left = mouseX + 'px';
                mark.style.top = mouseY + 'px';
                //大图动
                /**放大镜公式
                 * smallX / bigX = smallBox.width / bigBox.width
                 */
                console.log(mouseX / (small_box.offsetWidth / big_box.offsetWidth));
                big_img.style.left = - mouseX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                big_img.style.top = - mouseY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';

            }

      2.4 监听鼠标离开smallbox

small_box.onmouseout =function () {
            mark.style.display = "none";
            big_box.style.display = "none";
        }

     缺陷：上下滚动时并没有设置监听，标记和大图在网页滚动时不会随着鼠标移动。

https://github.com/yYohao/JSDemo