简单方法实现数组去重+放大镜

数组去重

1、运用到.indexof方法
2、创建新数组,将筛选出来的数组添加到新数组中可用.push()方法

 <script>
        var arr=['a','b','b','c']
        var newArr=[]
        for(i=0;i<arr.length;i++){
            if(newArr.indexOf(arr[i])==-1){
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>

放大镜

需要注意的点

• 鼠标移动是作用在哪个对象上
• 鼠标只出现在盒子中通过什么判断
• 鼠标出现盒子中时，需要什么样的条件将鼠标在mask的中间区域显示
• 原始图和放大图之间存在什么样的一个关系

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
            width: 800px;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

<div class="box" id="box">
       <div class="small" id="s_box">
           <img src="images/small.jpg" width="350" alt="" />
           <div class="mask" id="mask"></div>
       </div>
       <div class="big" id="b_box">
           <img src="images/big.jpg" alt="" />
       </div>
   </div>

<script>
   var box=document.getElementById("box")
   var s_box=document.getElementById("s_box")
   var s_img=s_box.children[0]
   var mask=document.getElementById("mask")
   var b_box=document.getElementById("b_box")
   var b_img=b_box.children[0]
   box.onmouseenter=function(){
       mask.style.display="block"
       b_box.style.display="block"
   }
   box.onmouseleave=function(){
       mask.style.display="none"
       b_box.style.display="none"
   }
  box.onmousemove=function(e){
      //获取鼠标在box中的位置
      var x=e.pageX-box.offsetLeft
      var y=e.pageY-box.offsetTop
     //使鼠标只能在mask中间  且不能超出盒子
      x=x-mask.offsetWidth/2
      y=y-mask.offsetHeight/2

      x=x<0?0:x
      y=y<0?0:y

      x=x>box.offsetWidth-mask.offsetWidth?box.offsetWidth-mask.offsetWidth:x
      y=y>box.offsetHeight-mask.offsetHeight?box.offsetHeight-mask.offsetHeight:y

      mask.style.left=x+"px"
      mask.style.top=y+"px"

      //找原始图片和要放大图片之间的关系  算出b_box中图片需要移动的距离

      var maskMax=box.offsetWidth-mask.offsetWidth
      var b_imgMax=b_img.offsetWidth-b_box.offsetWidth
    //去反的原因是放大的图片和mask移动的方向相反
      b_img.style.left=-x*b_imgMax/maskMax+"px"
      b_img.style.top=-y*b_imgMax/maskMax+"px"
      
  }
   
</script>