JavaScript进阶学习之图片操作5-职坐标

JavaScript进阶学习之图片操作5

沉沙 2018-10-19 来源：阅读 707 评论 0

摘要：本篇教程介绍了JavaScript进阶学习之图片操作5，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript进阶学习之图片操作5，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本次的图片操作是要实现模仿天猫淘宝的放大镜效果，如下图所示：

技术分享图片

其实现原理其实很简单，主要就是定位的运用，在上面的图中，左边是一个div，它的大小就是左边图片的大小，我们称为左窗口（原图），红色部分我们称为放大镜，右边也是一个div，我们称为右窗口，在右窗口中有一个大图，要实现放大效果，就需要保证原图/放大镜 = 大图 / 右窗口 = 放大倍率。当鼠标在左图中移动时，让放大镜跟随鼠标一起移动，然后大图在又窗口中同步运动，这样就可以模拟放大效果了。

首先是基本的结果：

<body>
        <div id="box">
           <img src="img/small.jpg"/>
           <div id="small"></div>
       </div>
       <div id="big">
         <img src="img/big.jpg" id="imgs"/>
      </div>
</body>

然后是基本样式：

html,body {
    margin: 0;
    padding:0;
  }
  /* 小图 */
  #box{
    width: 310px;
    height: 310px;
    position: relative;
    float:left;
  }
  #box img{
    width:100%;
    height:100%;
  }
  /* 红色方块 */
  #box #small{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.6;
    display: none;
  }
/* 放大图的盒子 */
  #big{
    width: 310px;
    height: 310px;
    overflow: hidden;
    position: relative;
    display: none;
    float:left;
  }
  /* 大图 */
  #big img{
    width: 930px;
    height: 930px;
    position: absolute;
  }

这里为了简单操作，我们将右窗口设置成和原图也就是左窗口同样大小。

通过上面我们知道，大图是右窗口的3倍，所以是放大了3倍，而且放大镜是原图的三分之一。

接下来需要设置在鼠标没有悬浮在左窗口时，放大镜、右窗口和原图是不可见的，只有当鼠标悬浮在左窗口之上时，放大镜、右窗口和原图是可见的。

box.onmouseenter = function(e){
  big.style.display=‘block‘;
  small.style.display=‘block‘;
}

box.onmouseleave = function(e){
  big.style.display=‘none‘;
  small.style.display=‘none‘;
}

最后就是监听鼠标事件，实现放大效果了。

box.onmousemove = function(e){
  //获取鼠标的x、y坐标。为了让鼠标刚好在small红色小方块的中心，所以需要减去50
  var top = e.clientY-50;
  var left = e.clientX-50;
  //限制small小方块移出box的范围
  if(top > 200){top = 200};
  if(top < 0){top = 0};
  if(left > 200){left = 200};
  if(left < 0){left = 0};
//动态设置small小方块的位置，让小方块跟随鼠标移动
  small.style.left = left + ‘px‘;
  small.style.top = top + ‘px‘;
  //让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以（-3）呢？因为big里面的大图是box的3倍。鼠标在box上面向右移动1px，那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
  img.style.top = top*(-3) + ‘px‘;
  img.style.left = left*(-3) + ‘px‘;
}

这样，就可以实现放大镜效果了。

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div id="box">
                <img src="img/small.jpg"/>
                <div id="small"></div>
             </div>
             <div id="big">
               <img src="img/big.jpg" id="imgs"/>
             </div>
</body>
<script>
var box = document.querySelector(‘#box‘);
var small = document.querySelector(‘#small‘);
var big = document.querySelector(‘#big‘);
var img = document.querySelector(‘#imgs‘);
box.onmousemove = function(e){
  var top = e.clientY-50;
  var left = e.clientX-50;
  if(top > 200){top = 200};
  if(top < 0){top = 0};
  if(left > 200){left = 200};
  if(left < 0){left = 0};
  small.style.left = left + ‘px‘;
  small.style.top = top + ‘px‘;
  img.style.top = top*(-3) + ‘px‘;
  img.style.left = left*(-3) + ‘px‘;
}
box.onmouseenter = function(e){
  big.style.display=‘block‘;
  small.style.display=‘block‘;
}
box.onmouseleave = function(e){
  big.style.display=‘none‘;
  small.style.display=‘none‘;
}
</script>
</html>

jQuery也可以实现上面的效果，原理是一样，基于鼠标事件和定位，这里就不再详细介绍了，会在代码下载链接中给出详细完整的代码。