原生 js 放大镜效果

放大镜效果是很常见的一种效果，例如淘宝，京东之类的购物商城里面经常会看到这种效果。

下面附上一张效果图：

好了，不要再看了，美女有那么好看吗？咱们来看代码好不好(　o=^•ェ•)o　┏━┓：

html布局：
（图片需要自己找哦 ㄟ( ▔, ▔ )ㄏ）

 <div id="demo">
        <div id="small-box">
            <!-- 原始图片所在区域 -->
            <div id="mark"></div>
            <!-- 扫描的圈圈 -->
            <div id="float-box"></div>
            <!-- 原图图片 -->
            <img src="./2.jpg" width="400px" height="255px" />
        </div>
        <!-- 显示区域:显示放大图片区域 -->
        <div id="big-box">
            <!-- 放一样的图片 -->
            <img src="./2.jpg" />
        </div>
    </div>

非常简单的布局效果 ，分为三个区域：原始图片的区域，扫描的圈圈，放大后显示的区域

css样式布局：

<style>
        * {
            margin: 0;
            padding: 0
        }
        #demo {
            /* display: block; */
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid red;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }
        #float-box {
            width: 100px;
            height: 100px;
            position: absolute;
            display: none;
            background: #fff;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            /* filter:alpha(opacity=50)是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。 */
            opacity: 0.5;
            /* 透明度 */
            border-radius: 75%;
            cursor: pointer;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 600px;
            height: 500px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #big-box img {
            position: absolute;
            z-index: 5;
        }
    </style>

到这里大概的样式布局差不多就完成了 ，下面就是最最核心的部分了！

js 核心代码：

<script>
        //页面加载完毕后执行
        window.onload = function () {
            // 获取所有被js操作元素队形
            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) {
                console.log(ev)
                var _event = ev || window.event; //兼容多个浏览器的event参数模式
                // objDemo.offsetLeft = demo 左边距离body 的距离；= demo外边距
                // objSmallBox.offsetLeft = 0 ；因为子元素脱离了父元素；所以small-box 左边距离 demo的距离 等于 0 
                // objFloatbox.offsetWidth/2 = (width + border)/2 =51
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth /
                    2;
                console.log(left + '=' + _event.clientX + '-' + objDemo.offsetLeft + '-' + objSmallBox.offsetLeft +
                    '-' + objFloatBox.offsetWidth /
                    2)
                // offsetX/Y , 触发事件位置；X ,Y子元素距离元素左边的距离；顶部的距离 与父元素是否有位置属性没有关系。坐标轴原点在父元素左上角
                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>

好了，代码到这里就结束了，js部分的代码相信大家看着都没有什么太大的问题，毕竟有那么多的注释啊哈哈(～￣▽￣)～