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>
猜你喜欢
