首页手记放大镜制作的核心要点

放大镜制作的核心要点

标签：

Html/CSS Html5

制作放大镜，首先必须要掌握常见的六大尺寸值。如果这六个值都不会的话，可能有点吃力，不过下图已经分析的很清楚了，应该能看懂。需要注意的一点是，除了鼠标位置是按照窗口来进行定位的，如图绿色画线，其他四项尺寸值是按照父元素——子元素关系来计算尺寸，如body和div1，div1和div2 。

offsetLeft和style.left主要有三点不同：

现在来分析：当放大镜在小图片上移动 x 距离时，大图片移动的距离Y是多少呢？
其实根据等比关系，有图中的关系：

下图中关系式，其实就是由核心公式转化而来：X/?=B/D=A/C.
（为了方便，只讨论单方向和横轴方向距离）
X:放大镜向左移动的距离；
?：大图片向右（反方向）移动的距离；
A：放大镜的宽；
B：小容器的宽，为了兼容，实际为mark的宽，不过与小容器宽相等的；
C：大容器的宽；
D：大图片的宽；

图中数字代表距离，则x的值应该如下计算：

上面就是放大镜核心原理。明白了原理后，对于放大镜的移动范围，浏览器的兼容性等细节再进行优化可以咯。

代码还是要贴上来的：

<!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;
    }
   //  为了兼容IE，把添加在小图片的特性全部移到mark
    #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; 
         // 鼠标移动的  变化距离
            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";
            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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="macbook-small.jpg" />     //    这张是小图片。
        </div>
        <div id="big-box">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="macbook-big.jpg" />  //  这张是大图片。
        </div>
    </div>
</body>

</html>

这张是小图片，可以下载后置于源码中使用。

这张是大图片，可以下载后置于源码中使用。