码迷,mamicode.com
首页 > Web开发 > 详细

JS 放大镜特效

时间:2018-08-28 18:57:34      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:nts   pac   offset   element   click   span   aci   elements   ntb   

放大镜特效

放大镜在商城网站经常会看到,作为前端,写这么一个肯定是小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 放大镜特效

标签:nts   pac   offset   element   click   span   aci   elements   ntb   

原文地址:https://www.cnblogs.com/xzsz/p/9549992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!