JavaScript 实现放大镜效果

JavaScript 实现放大镜效果

前言：放大镜，顾名思义，就是将所要观看的物体放大，让其看的更加清除和细致。那如何用JavsSript来实现对图片的放大呢？

正文：既然是放大镜，那么首先得有个放大镜…下面先来创建放大镜。

步骤1:放大镜只不过是一个幌子，我们创建一个div,用来通过在图片上不断移动，来实现图片放大的效果。首先创建一个小div用来存放图片

<div class="minBox">
<img src="img/233758hw7o7h08kkozkcwi.jpg"/>
<div class="moveBox">
</div>
</div>
//div样式
.minBox{
border: 1px solid red;
width: 400px;
height: auto;
position: relative;
display: inline-block;
vertical-align: top;
}
.minBox img{
width: 100%;
height: auto;

}

.moveBox{
border:1px solid black;
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
border-radius:50% ;
position: absolute;
left: 0px;
top: 0px;
display: none;//刚开始隐藏，鼠标移动到图片上时显示。
}

步骤2:接下来，我们创建一个div用来存放我们放大好的图片，即将上面所要观看的图片的width和height都增大一定的倍数。

<div class="maxBox">
<img src="img/233758hw7o7h08kkozkcwi.jpg"/>
</div>
//样式
.maxBox{
display: inline-block;
width: 700px;
height:600px;
overflow:hidden;
border: 10px solid yellow;
display: none;
}
.maxBox img{
width: 2800px;
height: auto;
}

步骤3:接下来就是用JavaScript来实现放大镜的移动和让图片随着镜头来放大。

minBox.onmousemove=function(){
var event=window.event||event;
moveX=event.clientX-50;//获取鼠标
moveY=event.clientY-50;
//下面4个判断是用来防止放大镜移到图片外面。
if(moveX<0){
moveX=0;
}
if(moveY<0){
moveY=0
}
if(moveX>=minBox.offsetWidth-moveBox.offsetWidth){
moveX=minBox.offsetWidth-moveBox.offsetWidth
}
if(moveY>=minBox.offsetHeight-moveBox.offsetHeight){
moveY=minBox.offsetHeight-moveBox.offsetHeight
}
moveBox.style.left=moveX+'px';
moveBox.style.top=moveY+'px';
moveBox.style.display='inline-block';
maxBox.style.display='inline-block';
console.log(maxBox.scrollLeft)
//获取比例,让放大图片的镜头一直和放大镜所指向的内容保持一致，主要通过改变maxBox的scorllLeft和scorllTop来实现该功能。
var scaleX=moveBox.offsetLeft/(minBox.offsetWidth-moveBox.offsetWidth)
var scaleY=moveBox.offsetTop/(minBox.offsetHeight-moveBox.offsetHeight)
maxBox.scrollLeft=(maxImg.clientWidth-maxBox.clientWidth)*scaleX;
maxBox.scrollTop=(maxImg.clientHeight-maxBox.clientHeight)*scaleY;
}