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

 

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

 已实现功能：
     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;
            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>
posted @ 2017-04-22 23:02  快乐的咸鱼  阅读(473)  评论(0)  编辑  收藏  举报