每当打开淘宝，天猫等pc端时，看到心仪的物品时，点击图片时，便呈现出放大的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解。如下图展示所见：

很是常见，在此记载一下，毕竟好记性不如烂笔头。

主要事件:

  • onmouseout
  • onmouseover
  • onmousemove

这种实现也是比较简单的，代码如下所示：

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>放大镜</title>

     <style>

         * {

             margin: 0;

             padding: 0

         }

         #demo {

             display: block;

             width: 400px;

             height: 255px;

             margin: 50px;

             position: relative;

             border: 1px solid #ccc;

         }

         #small-box {

             position: relative;

             z-index: 1;

         }

         #float-box {

             display: none;

             width: 160px;

             height: 120px;

             position: absolute;

             background: #ffffcc;

             border: 1px solid #ccc;

             filter: alpha(opacity=50);

             opacity: 0.5;

         }

         #mark {

             position: absolute;

             display: block;

             width: 400px;

             height: 255px;

             background-color: #fff;

             filter: alpha(opacity=0);

             opacity: 0;

             z-index: 10;

         }

         #big-box {

             display: none;

             position: absolute;

             top: 0;

             left: 460px;

             width: 400px;

             height: 300px;

             overflow: hidden;

             border: 1px solid #ccc;

             z-index: 1;;

         }

         #big-box img {

             position: absolute;

             z-index: 5

         }

     </style>

     <script>

         //页面加载完毕后执行

         window.onload = function () {

             var objDemo = document.getElementById("demo");

             var objSmallBox = document.getElementById("small-box");

             var objMark = document.getElementById("mark");

             var objFloatBox = document.getElementById("float-box");

             var objBigBox = document.getElementById("big-box");

             var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

             objMark.onmouseover = function () {

                 objFloatBox.style.display = "block"

                 objBigBox.style.display = "block"

             }

             objMark.onmouseout = function () {

                 objFloatBox.style.display = "none"

                 objBigBox.style.display = "none"

             }

             objMark.onmousemove = function (ev) {

                 var _event = ev || window.event;  //兼容多个浏览器的event参数模式

                 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;

                 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                 //设置边界处理，防止移出小图片

                 if (left < 0) {

                     left = 0;

                 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {

                     left = objMark.offsetWidth - objFloatBox.offsetWidth;

                 }

                 if (top < 0) {

                     top = 0;

                 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {

                     top = objMark.offsetHeight - objFloatBox.offsetHeight;

                 }

                 objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言

                 objFloatBox.style.top = top + "px";

                 //求其比值

                 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);

                 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                 //方向相反，小图片鼠标移动方向与大图片相反，故而是负值

                 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";

                 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";

             }

         }

     </script>

 </head>

 <body>

     <div id="demo">

         <div id="small-box">

             <div id="mark"></div>

             <div id="float-box"></div>

             <img src="img/macbook-small.jpg"/>

         </div>

         <div id="big-box">

             <img src="img/macbook-big.jpg"/>

         </div>

     </div>

 </body>

 </html>

这里面需要区别的是offsetLeft和style.left：

offsetLeft 获取的是相对于父对象的左边距；left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距；

  • offsetLeft返回的数值，而style.left则返回的是字符串；
  • offsetLeft是只读的，style.left可读写的；
  • style.left的值需要事先定义，否则取到的值为空，而且必须要定义在html里，如果写在样式里面，是取不出它的值的；

这是这个代码的要点之一，另外一个就是去要计算其比例。根据对应比例，进行代码的显示。

另外，小图片和大图片的显示，移动方向是相反的，所以比例前面会乘以一个负号。这个需要注意。

js代码实现放大镜效果的更多相关文章

  1. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  2. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  3. 前端JS电商放大镜效果

    前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  5. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  6. js代码跑马灯效果-----轮播图字效果！

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  7. js代码实现购物车效果

    页面分上下两部分,上部分是所有的数据,下部分是购物车.通过在上面选择需要处理的数据添加进到购物车,实现对购物车数据的统一处理. 需要注意的有两点:①购物车数据可删除,且不能重复添加 ②响应时间考虑,购 ...

  8. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  9. js---电商中常见的放大镜效果

    js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...

随机推荐

  1. requireJS的初步掌握(二)

    前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描述的是requireJS的一些常用的 ...

  2. java中File类的常用所有方法及其应用

    创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false.mkdir()  在指定位置创建一个单级文件夹.mkdirs()  在指定位置 ...

  3. 简学Python第三章__函数式编程、递归、内置函数

    #cnblogs_post_body h2 { background: linear-gradient(to bottom, #18c0ff 0%,#0c7eff 100%); color: #fff ...

  4. Python求解进制问题（阿里巴巴2015笔试题）

    问题描述:用十进制计算30的阶乘,然后把结果转换成三进制表示,那么该进制表示的结果末尾会有多少个连续0?解析:作为笔试题的话,要想按照题意先把阶乘结果计算出来再转换成三进制最后再数0的个数,时间肯定来 ...

  5. 纪中集训 Day 7

    今天超级不爽啊啊啊啊 尼玛我三道题都想出来了就是没对一道，第一题没理负数尼玛题目没告诉我，第二题尼玛题目也没说最近的点是第(l+r)/2而不是距离为(a[l]+a[r])/2啊啊啊啊，第三题没打GCD ...

  6. 查看hive中某个表中的数据、表结构及所在路径

    查看hive中action_data_myisam表中的数据.表结构及所在路径 1.客户端进入hive环境:hive 2.查看表数据,鉴于数据量大,这里只显示前五条:select * from act ...

  7. linux下基于rsync + find命令实现文件同步机制

    rsync和find是linux系统自带的命令,如果没有安装可以找到系统安装盘或者ISO文件,里面有rpm包,安装一下就可以了.       具体思路如下:             1)可以实现定时进 ...

  8. 【转】Jqgrid学习之数据

    jqGrid可支持的数据类型:xml.json.jsonp.local or clientSide.xmlstring.jsonstring .script.function (…). Json数据 ...

  9. 使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

  10. 每天一个linux命令(48)--ln命令

    ln是Linux中又一个非常重要的命令,它的功能是为某个文件在另外一个位置建立一个同步的链接,当我们需要在不同的目录,用到相同的文件时,我们不需要在每个需要的目录下都放一个相同的文件,我们只要在某个固 ...