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

其实现原理其实很简单，主要就是定位的运用，在上面的图中，左边是一个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 <){top = 0};

  if(left > 200){left = 200};

  if(left <){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也可以实现上面的效果，原理是一样，基于鼠标事件和定位，这里就不再详细介绍了，会在代码下载链接中给出详细完整的代码。

完整代码下载：点这里

JavaScript之图片操作5的更多相关文章

  1. JavaScript之图片操作7

    前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...

  2. JavaScript之图片操作1

    在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...

  3. JavaScript之图片操作6

    上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...

  4. JavaScript之图片操作3

    在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...

  5. JavaScript之图片操作4

    本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...

  6. JavaScript之图片操作2

    在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...

  7. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

随机推荐

  1. c# 敏捷3 连接，批量处理，分页

    class Program { public class post { public int id { get; set; } public string name { get; set; } pub ...

  2. python django day 3 页面，自动 跳转，参数传递

    zqxt_views/urls.pypath('', calc_views.index, name='home'), calc/views.pydef index(request): return r ...

  3. PyCharm下载安装

    PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性,鉴于目前最新版 PyCharm 使用教程较少,为了节约时间,来介绍一下 PyCharm 在 Windows下是如何安装的. 这是 ...

  4. Java中break和continue跳出指定循环

    https://www.cnblogs.com/miys/p/b7f6a463bc58785d74a8a7fccd1f1243.html 在Java中,break和continue可以跳出指定循环,在 ...

  5. Map接口的使用

    1.Map定义: Collection是孤立存在的,向集合中存储元素是一个一个放,Map中的集合 存储是成对,通过键找到值,键和值是映射关系. 2.注意: Map集合中不能包含重复的键,但是可以包含重 ...

  6. Object 及toString() 方法的重写

    Object: 是所有的类的父类  ,Object中所有的方法 , 子类都能使用  ,   接口不是Object子类. Person: /*将父类的equals方法 重写 * 不改变父类的源代码 eq ...

  7. 主机-配件-接口-整机-3c-2

    pc机,服务器,智能手机与各种嵌入式乃至物联网 http://www.mifalife.net/hk/mall.html MIFA F5 户外无线蓝牙音箱2.0声道高保真可通话插卡便携低音炮迷你iph ...

  8. HTTP请求属性说明

    1)URL:页面地址. 2)Method :页面的提交方式,POST或GET. 3)EncType:编码类型.此参数给出一个内容类型(Content-Type),指定其做为回放脚本时“Content- ...

  9. 原码，反码，补码，及Java中数字表示方法

    原码:原码是符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值. 如:如果是八位二进制1即用00000001表示,-1即用10000001表示. 反码:正数的反码就是其本身,负数的反码是在其 ...

  10. kafka 知识点

    Replica如何分布 为了尽量做好负载均衡和容错能力,需要将同一个Partition的Replica尽量分散到不同的机器.如果所有的Replica都在同一个Broker上,那一旦该Broker宕机, ...