首页 > 代码库 > 放大镜 鼠标滑入 鼠标滑轮放大

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

 

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

 已实现功能:
     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=http://www.mamicode.com/"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>

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