JS 放大镜特效
Posted 心之所在无畏无惧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 放大镜特效相关的知识，希望对你有一定的参考价值。
放大镜特效
放大镜在商城网站经常会看到，作为前端，写这么一个肯定是小case，本人就献丑了。如果没有一点思路的同学，可以先学DOM事件里的事件位置、距离、宽高各种方法属性。
那么直接上代码，代码里各种注释相当完备：
<!doctype html>
<title>放大镜</title>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
list-style:none;
}
/*处理小图的样式*/
#small{
width:400px;
height:400px;
border:1px solid red;
position:absolute;
left:50px;
top:50px;
}
#small img{
width: 100%;
height: 100%;
}
#move{
border:1px solid yellow;
background:yellow;
position:absolute;
left:0px;
top:0px;
opacity:0.3;
display:none;
}
/*图层蒙版*/
.mask{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
}
/*处理大图*/
#big{
width:400px;
height:400px;
border:1px solid red;
position:absolute;
left:460px;
top:50px;
display:none;
/*超出隐藏*/
overflow:hidden;
}
#big img{
width:1000px;
height:1000px;
position:absolute;
}
/*处理点击更换的样式*/
#dian{
width:400px;
height:100px;
border:1px solid green;
position:absolute;
left:50px;
top:460px;
}
#dian li{
float:left;
padding:1px;
}
#dian li img{
width:98px;
}
</style>
<!--1.先做小图-->
<div id="small">
<img id="smallImg" src="image/1.jpg" >
<div id="move"></div>
<!-- 图层蒙版 -->
<div class="mask"></div>
</div>
<!--2处理大图 移入small 大图显示-->
<div id="big">
<img id="bigImg" src="image/1.jpg" >
</div>
<!--3更换图片-->
<ul id="dian">
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
<script>
var big=document.getElementById(‘big‘);
var bigImg=document.getElementById(‘bigImg‘);
var small=document.getElementById(‘small‘);
var smallImg=document.getElementById(‘smallImg‘);
var move=document.getElementById(‘move‘);
var dian=document.getElementById(‘dian‘);
var imgs=dian.getElementsByTagName(‘img‘);
//小滑块的宽高：
// big.offsetWidth/move=bigImg.offsetWidth/smallImg.offsetWidth
// move=big/(bigImg.offsetWidth/smallImg.offsetWidth)
// console.log(big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth));
//鼠标移入small显示move和big，且设置move的大小
small.onmouseover = function(){
big.style.display=‘block‘;
move.style.display=‘block‘;
move.style.width = big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth)+ ‘px‘;
move.style.height = big.offsetHeight/(bigImg.offsetHeight/smallImg.offsetHeight) + ‘px‘;
};
//鼠标移出隐藏move和big
small.onmouseout = function(){
big.style.display = ‘none‘;
move.style.display = ‘none‘;
};
small.onmousemove=function(e){
var e=e||window.event;
//1.获取鼠标在small的位置 且 让小滑块居中
// 第一种方法：
// console.log(e.clientX);//e.pageX
// var x=e.clientX-small.offsetLeft - (move.offsetWidth/2);
// var y=e.clientY-small.offsetTop - (move.offsetHeight/2);
//
// 第二种方法：添加图层蒙版 因为e.offsetX获取是根据在触发元素中的所在坐标
var x = e.offsetX - move.offsetWidth/2;
var y = e.offsetY - move.offsetHeight/2;
// console.log(y);
//2移动前判断是否超出零界点
if(x<=0){
x = 0;
}
if(x>=(small.offsetWidth-move.offsetWidth)){
x = small.offsetWidth-move.offsetWidth;
}
if(y<=0){
y = 0;
}
if(y>=(small.offsetHeight-move.offsetHeight)){
y = small.offsetHeight-move.offsetHeight;
}
//3.让小滑块跟着鼠标移动
move.style.left= x + ‘px‘;
move.style.top= y + ‘px‘;//parseInt 10
//4. 让大图跟着small里滑块移动的距离 1000 400 2.5
var left = - (bigImg.offsetWidth/smallImg.offsetWidth) * x;
var top = - (bigImg.offsetHeight/smallImg.offsetHeight) * y;
//5.把移动值赋给大图从而定位
bigImg.style.left=left + ‘px‘;
bigImg.style.top=top + ‘px‘;
}
//点解dian中的某一图片，把该图片src赋给smallImg和bigImg
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(e){
var e=e||window.event;
console.log(this.src);
smallImg.src=this.src;
bigImg.src=this.src;
}
}
</script>
以上是关于JS 放大镜特效的主要内容，如果未能解决你的问题，请参考以下文章