今天是周六,陪朋友逛了一天,回来就写代码,写到吐血了~~~
已实现功能: 1、图片局部放大 2、按住鼠标右键时,滑动鼠标滑轮,可修改放大缩小倍数 本段代码仍存在问题: 1、代码不够精简 2、按住鼠标右键移动时,放大镜内图片不能随之放大
代码并不完善,有时间再写,
原理图,(本小牛手画的,不喜勿喷~~)
大概原理是,等比例背景图定位
![](https://images2015.cnblogs.com/blog/1128845/201704/1128845-20170422230508337-1198510449.png)
最终效果:
黄色部分有张 遮罩层背景图
代码:
<!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>