js实现详情页中的放大镜效果(加注释)

1.html

 <div id="small">
        <div id="mo">    
        </div>
        <img src="img/timg.jpg"/>
        <div id = "frame">    
        </div>    
    </div>
    <div id = "big">
        <img src="img/timg.jpg"/>
    </div>    

2.css

<style>
            *{
                margin:0;padding:0;
            }
            #small{
                width:400px;
                height:400px;
                position:relative;
                box-shadow: 0 0 5px #000;
            }
            #small img{
                /* 图片百分百,完全覆盖原始框 */
                width:100%;
                height:100%;
            }
            #frame{
                width:100px;
                height:100px;
                position:absolute;
                box-shadow:0 0 5px #000;
                top:0;
                left:0;
                /* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
                display: none;
                /* 在放大镜中插入背景图,根据背景图定位,改变放大镜中和原始框中的图片一一对应 */
                /* 0 0 即为background-position的值 */
                background: url(img/timg.jpg) no-repeat 0 0;
                /* CSS2中的内容要和CSS3中的分开 */
                background-size: 400px 400px ;
            }
            #big{
                width:400px;
                height:400px;
                position:relative;
                box-shadow: 0 0 5px #000;
                /* 因为放大框中的内容
                与放大镜是16：1放大的,
                所以原始框与放大框相同大小的情况下
                使用overflow: hidden;用放大框截取插入图片的大小 */
                overflow: hidden;
                /* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
                display: none;
            }
            #big img{
                width:1600px;
                height:1600px;
                position: absolute;
                left: 0;
                top:0;
            }
            
            #big,#small{
                margin-left: 100px;
                float: left;
            }
            #mo{
                /* 最上边的一层膜宽高100%,层级在最上层,完全覆盖住原始框，
                确保鼠标在原始框上移动时,放大镜能跟着稳定的移动，
                即鼠标移动的参照物唯一 */
                width:100%;
                height:100%;
                z-index: 999;
                position: absolute;
            }
</style>

3.js

<script>
    //获取原始框
    var oSmall = document.getElementById("small");
    //获取放大框
    var oBig = document.getElementById("big");
    //获取放大镜
    var oFrame = document.getElementById("frame");
    //获取放大框中的图片
    var oBig_img = oBig.children[0]
    //获取原始框中的图片
    var oSmall_img = oSmall.children[1];
    //鼠标移入事件(注：没有兼容问题)
    //放大镜和放大框显现出来
    oSmall.onmouseenter = function(){
        oBig.style.display = "block";
        oFrame.style.display = "block";
        //鼠标移入图片变模糊
        oSmall_img.style.opacity = "0.3";
    }
    //鼠标移出事件(注：没有兼容问题)
    //放大镜和放大框变回原始的隐藏状态
    oSmall.onmouseleave = function(){
        oBig.style.display = "none";
        oFrame.style.display = "none";    
        //鼠标移出,图片变清晰
        oSmall_img.style.opacity = "1"
    }
    //鼠标移动事件(注：有兼容问题)
    oSmall.onmousemove = function(event){
        //解决兼容问题
        var e = event || window.event;
        //获取鼠标在放大镜中心的位置坐标(用于判断放大镜不会移出原始框)
        //获取位置用offsetX/offsetY
        //size初始值为100,与放大镜未放大之前一致,
        //size/2是为了获取鼠标在放大镜的中心点
        //用size而不是定值,是为了后边放大镜随鼠标滚轮滚动放大缩小时
        //鼠标能一直在放大镜中心位置
        //e.offsetY/e.offsetX是鼠标到原始框边框的距离
        //size / 2是鼠标到放大镜边框的距离
        //nTop/nLeft是放大镜边框到原始框边框的距离
      var nTop = e.offsetY - size / 2;
        var nLeft = e.offsetX - size / 2;
        //判断放大镜的临界值
        //不小于最小值,不大于最大值
        //判断放大镜的最小值
        if(nTop <= 0){
            //差一点就等于零的时候,也赋值为零
            nTop = 0;
        }
        if(nLeft <= 0){
            nLeft = 0;
        }    
        //判断放大镜的最大值
        //因为坐标只有offsetLeft 和 offsetTop两个,所以计算最大值时:
        //需要获取放大镜的左和上的边框到原始框的左和上的边框的最大距离与原始框的坐标位置进行比较
        //offsetHeight/offsetWidth获取元素的宽高
        //原始框的宽高 - 放大框的宽高 == 放大镜可以移动的最大值
        var maxTop = oSmall.offsetHeight - oFrame.offsetHeight;
        var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth;
        //放大镜的边框大于等于最大值,停
        if(nTop >= maxTop){
            nTop = maxTop;
        }
        if(nLeft >= maxLeft){
            nLeft = maxLeft;
        }    
        //放大镜的位置坐标
        oFrame.style.top = nTop + "px"  
        oFrame.style.left = nLeft + "px"
        //计算放大镜和放大框之间的缩放比例
        //计算比例用offsetWidth/offsetHeight
        var propX = oBig.offsetWidth/oFrame.offsetWidth;
        var propY = oBig.offsetHeight/oFrame.offsetHeight;
        //-nTop/-nLeft用负值,使放大框中的内容与放大镜所停的位置一致(图片内容移动方向相同)
        //如果是正值,放大镜移动时与放大框中的内容相反移动(放大框中不会出现对应的放大图片)
        oBig_img.style.top = -nTop*propY + "px"
        oBig_img.style.left = -nLeft*propX + "px"
        //鼠标移入时,放大镜清晰,原始框模糊
        //利用改变插入到放大镜中的背景图的position,进行图片的一一对应
        //注意:``里的${}和${}中间用空格隔开
        oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`;
    }
        //鼠标滚轮事件
        //注意:兼容问题
       //设置size初始值为100,即放大镜未放大缩小时的原始状态
        //通过判断滚轮的上下滚动方向,改变放大镜的大小,即宽高同时增大或缩小
       var size = 100;
         //解决兼容问题
         //FF（火狐)
       if(document.addEventListener){
             //第一个参数是事件名称,
             //第二个参数是事件处理函数,
             //第三个参数是一个被废弃的参数,是以事件捕获的形式,还是事件冒泡的形式触发事件,默认false
             //第三个参数基本用不到
               document.addEventListener('DOMMouseScroll',handleEvent,false);
       }
         //IE/Opera（欧鹏）/Chrome(谷歌)
       window.onmousewheel = document.onmousewheel = handleEvent;
         // 分辨滚轮向上还是向下;
       function handleEvent(event){
               var e = event || window.event;
                // FF => detail  向上 是  负数 ;
                //                      向下 是  正数;
                // Chrome => deltaY   向上 是 负数;
                //                                  向下 是  正数;
               var flag = true
               if(e.detail != 0 ){
                    // 说明浏览器是火狐;
                       if(e.detail > 0){
                               flag = false// 向下;
                       }else{
                               flag = true;// 向上;
                       }
               }else{
                    //说明浏览器是IE/Opera/Chrome
                       if(e.deltaY > 0){
                               flag = false// 向下;
                       }else{
                               flag = true;// 向上;
                       }
               }
                //滚轮向上时,放大镜变大，放大框中的内容缩小;
                //滚轮向下时,放大镜缩小,放大框中的内容变大;
               if(flag){
                      // 向上
                       size ++;
               }else{
                       size --;// 向下
               }
                //将size值赋给放大镜
                oFrame.style.width =  size + "px";
                oFrame.style.height = size + "px";
                //当鼠标放在原始框上一动不动时,放大镜也不会再增大了
                oSmall.onmousemove(e);
                //放大缩小后放大镜和放大框的比例发生了变化,导致放大框中的内容与放大镜所在位置不符
                // 根据放大镜的缩放,重新计算放大框与放大镜之间的缩放比例
                var prop = 400 / size;
                // 根据比例缩放放大框中的图片 ;
                oBig_img.style.width = 400 * prop + "px";
                oBig_img.style.height = 400 * prop + "px";
       }
</script>