• 放大镜 鼠标滑入 鼠标滑轮放大

    今天是周六，陪朋友逛了一天，回来就写代码，写到吐血了~~~ 

     已实现功能：
     1、图片局部放大
     2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数
本段代码仍存在问题：
     1、代码不够精简
     2、按住鼠标右键移动时，放大镜内图片不能随之放大
    代码并不完善，有时间再写，

    原理图，（本小牛手画的，不喜勿喷~~）
    大概原理是，等比例背景图定位

    最终效果：

     黄色部分有张 遮罩层背景图 

              

     代码：

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mediumDiv{
            position: relative;
            width: 375px;
            height: 281px;
        }
        .mask {
            position: absolute;
            width: 125px;
            height: 125px;
            background: url(2.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
            top: 0;
            left: 0;
        }
        .mImg{
            display: block;
            width: inherit;
            height: inherit;
        }
        .superMask{
            position: absolute;
            width: inherit;
            height: inherit;
            opacity: 0;
            top: 0;
            left: 0;
            cursor: move;
        }
        .largeDiv{
            position: absolute;
            width: 300px;
            height: 300px;
            background: #fff;
            border: 1px solid #ddd;
            top: 5px;
            left: 385px;
            z-index: 999;
            /*display: none;*/
        }
    </style>
</head>
<body>
<div class="mediumDiv">
    <img class="mImg" src="P-s.jpg"/>
    <div class="mask"></div>
    <div class="superMask"></div>
</div>
<div class="largeDiv"></div>
</body>
<script>
    /*
        已实现功能：
        1、图片局部放大
        2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数
     本段代码仍存在问题：
     1、代码不够精简
     2、按住鼠标右键移动时，放大镜内图片不能随之放大
    * */
    //为了达到最简效果这里就不引入jQuery拉哈
    //封装selector api 为 $函数简化查询
    function $(selector){
        return document.querySelectorAll(
                selector
        );
    }
    var mImg=$(".mImg")[0],
        mediumDiv=$('.mediumDiv')[0],
        mask=$('.mask')[0],
        smask=$('.superMask')[0],

    // 放大镜里，大原图的实际宽高
    // 这里仅是放大镜效果demo，小图和大图是同一张图片
    // 所以直接用了，实际开发中，这些美工都会给的，不用担心，即便不给咱也有办法搞到，
    // 这里就不废话了哈
        BW= mImg.naturalWidth,
        BH= mImg.naturalHeight,
        BX=BY= 0,
        mw= mImg.width,
        mh= mImg.height,
        largeDiv=$('.largeDiv')[0];

     var LSIZEW= mediumDiv.offsetWidth,
         LSIZEH= mediumDiv.offsetHeight,
         MSIZE= mask.offsetWidth;

         //mask最大top和left
         MAXT=LSIZEH-MSIZE;
         MAXL=LSIZEW-MSIZE;

    var nBW= BW,
            nBH= BH;
    //放大镜里的背景原图
    var src=mImg.src;
    //查找最后一个.的位置
    var i=src.lastIndexOf(".");
    src= src.slice(0,i-1)+"l"+src.slice(i);
    smask.addEventListener("mouseover",
            function(){
                mask.style.display="block";
                largeDiv.style.cssText=
                        "display:block;"
                        +"background-image:url("+src+")";
            }
    );
    smask.addEventListener("mouseout",
            function(){
                mask.style.display="none";
                largeDiv.style.display="none";
            }
    );
    //为mediumDiv添加鼠标移动事件
    smask.addEventListener("mousemove",drawMask);
    smask.addEventListener("mousemove",mouseMove);
    function mouseMove(e){
        //获得鼠标相对于当前元素的坐标
        var x=e.offsetX,y=e.offsetY;
        //计算mask的top和left
        var l=x-MSIZE/2, t=y-MSIZE/2;
        if(l<0) l=0;
        else if(l>MAXL) l=MAXL;

        if(t<0) t=0;
        else if(t>MAXT) t=MAXT;
        //设置mask的top和left
        mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
        BX=BW*l/mw;BY=BH*t/mh;
            //修改largeDiv的背景图片位置
            largeDiv.style.backgroundPosition=
                    '-'+BX+"px "+('-'+BY)+"px";
    }
    function  drawMask(e){
        //获得鼠标相对于当前元素的坐标
        var x=e.offsetX,y=e.offsetY;
        //计算mask的top和left
        var l=x-MSIZE/2, t=y-MSIZE/2;
        if(l<0) l=0;
        else if(l>MAXL) l=MAXL;

        if(t<0) t=0;
        else if(t>MAXT) t=MAXT;
        //设置mask的top和left
        mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
        BX=BW*l/mw;BY=BH*t/mh;
    }
    smask.addEventListener('mouseup',function(e){
        smask.addEventListener("mousemove",mouseMove);
    });
    smask.addEventListener('mousedown',function(e){
        if(event.button==2) { // 鼠标右键按下
            smask.removeEventListener("mousemove", mouseMove);
        }
   });
//  判断滚轮向上或向下在浏览器中也要考虑兼容性，
// 现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，
// 其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，
// detail只取±3，wheelDelta只取±120
//     《不同分辨率 值不同，比如我的1920*1080的 是150》，其中正数表示为向上，负数表示向下。
    smask.addEventListener('mousewheel',function(e){   //Firefox下不能运行，有时间在做兼容性哈哈

        if(e.wheelDelta>0){ // 向上滑动
            nBW  = nBW + (BW/BH)*100;   //宽高等比例放大
            nBH  = nBH + 100;

        }else if(e.wheelDelta<0){  //向下滑动
            nBW  = nBW - (BW/BH)*100;
            nBH  = nBH - 100;
        }
        nBW= nBW<largeDiv.offsetWidth? largeDiv.offsetWidth : nBW;
        nBH= nBH<largeDiv.offsetHeight? largeDiv.offsetHeight : nBH;
        var offsetX=nBW-BW,offsetY=nBH-BH;
        //修改largeDiv的背景图片大小
        largeDiv.style.cssText=
                "display:block;"
                +"background-image:url("+src+")";
        largeDiv.style.backgroundSize=nBW+"px "+nBH+"px";
            //修改largeDiv的背景图片位置
                largeDiv.style.backgroundPosition=
                        '-'+(BX+offsetX/2)+"px "+('-'+(BY+offsetY/2))+"px";
         });

</script>
</html>
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .mediumDiv{
                position: relative;
                 375px;
                height: 281px;
            }
            .mask {
                position: absolute;
                 125px;
                height: 125px;
                background: url(2.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
                top: 0;
                left: 0;
            }
            .mImg{
                display: block;
                 inherit;
                height: inherit;
            }
            .superMask{
                position: absolute;
                 inherit;
                height: inherit;
                opacity: 0;
                top: 0;
                left: 0;
                cursor: move;
            }
            .largeDiv{
                position: absolute;
                 300px;
                height: 300px;
                background: #fff;
                border: 1px solid #ddd;
                top: 5px;
                left: 385px;
                z-index: 999;
                /*display: none;*/
    }
        </style>
    </head>
    <body>
    <div class="mediumDiv">
        <img class="mImg" src="P-s.jpg"/>
        <div class="mask"></div>
        <div class="superMask"></div>
    </div>
    <div class="largeDiv"></div>
    </body>
    <script>
        /*
            已实现功能：
            1、图片局部放大
            2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数
         本段代码仍存在问题：
         1、代码不够精简
         2、按住鼠标右键移动时，放大镜内图片不能随之放大
        * */
        //为了达到最简效果这里就不引入jQuery拉哈
        //封装selector api 为 $函数简化查询
    function $(selector){
            return document.querySelectorAll(
                    selector
            );
        }
        var mImg=$(".mImg")[0],
            mediumDiv=$('.mediumDiv')[0],
            mask=$('.mask')[0],
            smask=$('.superMask')[0],

        // 放大镜里，大原图的实际宽高
        // 这里仅是放大镜效果demo，小图和大图是同一张图片
        // 所以直接用了，实际开发中，这些美工都会给的，不用担心，即便不给咱也有办法搞到，
        // 这里就不废话了哈
    BW= mImg.naturalWidth,
            BH= mImg.naturalHeight,
            BX=BY= 0,
            mw= mImg.width,
            mh= mImg.height,
            largeDiv=$('.largeDiv')[0];

         var LSIZEW= mediumDiv.offsetWidth,
             LSIZEH= mediumDiv.offsetHeight,
             MSIZE= mask.offsetWidth;

             //mask最大top和left
    MAXT=LSIZEH-MSIZE;
             MAXL=LSIZEW-MSIZE;

        var nBW= BW,
                nBH= BH;
        //放大镜里的背景原图
    var src=mImg.src;
        //查找最后一个.的位置
    var i=src.lastIndexOf(".");
        src= src.slice(0,i-1)+"l"+src.slice(i);
        smask.addEventListener("mouseover",
                function(){
                    mask.style.display="block";
                    largeDiv.style.cssText=
                            "display:block;"
    +"background-image:url("+src+")";
                }
        );
        smask.addEventListener("mouseout",
                function(){
                    mask.style.display="none";
                    largeDiv.style.display="none";
                }
        );
        //为mediumDiv添加鼠标移动事件
    smask.addEventListener("mousemove",drawMask);
        smask.addEventListener("mousemove",mouseMove);
        function mouseMove(e){
            //获得鼠标相对于当前元素的坐标
    var x=e.offsetX,y=e.offsetY;
            //计算mask的top和left
    var l=x-MSIZE/2, t=y-MSIZE/2;
            if(l<0) l=0;
            else if(l>MAXL) l=MAXL;

            if(t<0) t=0;
            else if(t>MAXT) t=MAXT;
            //设置mask的top和left
    mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
            BX=BW*l/mw;BY=BH*t/mh;
                //修改largeDiv的背景图片位置
    largeDiv.style.backgroundPosition=
                        '-'+BX+"px "+('-'+BY)+"px";
        }
        function  drawMask(e){
            //获得鼠标相对于当前元素的坐标
    var x=e.offsetX,y=e.offsetY;
            //计算mask的top和left
    var l=x-MSIZE/2, t=y-MSIZE/2;
            if(l<0) l=0;
            else if(l>MAXL) l=MAXL;

            if(t<0) t=0;
            else if(t>MAXT) t=MAXT;
            //设置mask的top和left
    mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
            BX=BW*l/mw;BY=BH*t/mh;
        }
        smask.addEventListener('mouseup',function(e){
            smask.addEventListener("mousemove",mouseMove);
        });
        smask.addEventListener('mousedown',function(e){
            if(event.button==2) { // 鼠标右键按下
    smask.removeEventListener("mousemove", mouseMove);
            }
       });
    //  判断滚轮向上或向下在浏览器中也要考虑兼容性，
    // 现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，
    // 其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，
    // detail只取±3，wheelDelta只取±120
    //     《不同分辨率 值不同，比如我的1920*1080的 是150》，其中正数表示为向上，负数表示向下。
    smask.addEventListener('mousewheel',function(e){   //Firefox下不能运行，有时间在做兼容性哈哈

    if(e.wheelDelta>0){ // 向上滑动
    nBW  = nBW + (BW/BH)*100;   //宽高等比例放大
    nBH  = nBH + 100;

            }else if(e.wheelDelta<0){  //向下滑动
    nBW  = nBW - (BW/BH)*100;
                nBH  = nBH - 100;
            }
            nBW= nBW<largeDiv.offsetWidth? largeDiv.offsetWidth : nBW;
            nBH= nBH<largeDiv.offsetHeight? largeDiv.offsetHeight : nBH;
            var offsetX=nBW-BW,offsetY=nBH-BH;
            //修改largeDiv的背景图片大小
    largeDiv.style.cssText=
                    "display:block;"
    +"background-image:url("+src+")";
            largeDiv.style.backgroundSize=nBW+"px "+nBH+"px";
                //修改largeDiv的背景图片位置
    largeDiv.style.backgroundPosition=
                            '-'+(BX+offsetX/2)+"px "+('-'+(BY+offsetY/2))+"px";
             });

    </script>
    </html>
  • 相关阅读:
    关于各种好玩的神奇函数
    模板——AC自动机
    模板——造数据
    VIM常用操作
    springboot注解
    面试题
    Linux常用命令
    Zookeeper
    对cpu与load的理解及线上问题处理思路
    top
  • 原文地址：https://www.cnblogs.com/web-fusheng/p/6750200.html
Copyright © 2020-2023  润新知