每当打开淘宝，天猫等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. 谨慎能捕千秋蝉（一）——XSS

    最近在研读<白帽子讲web安全>和<Web前端黑客技术揭秘>,为了加深印象,闲暇之时做了一些总结. 下面是书中出现的一些专有词汇: POC(Proof Of Concept): ...

  2. struts2系列笔记（1）

    struts2框架 如果你之前在MVC模式的时候一直都是通过servlet,获取和返回数据,那么现在开始学习struts2框架, Struts是一个实现MVC设计模式的优秀的框架.它的许多优点我就不说 ...

  3. Oracle索引语句整理

    转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...

  4. SQLServer 数据的导入

    选择数据源,选择文件路径 直接点击下一步,选择自己的源表和目标表 勾选忽略,然后到完成,数据上传成功 可能出现的问题:源文件和目标文件的列名不一致,导致被忽略不能导入 预览发现有乱码,因为编码格式

  5. UCOSII时间任务块

    转:http://blog.csdn.net/wchp314/article/details/5416476 uCOS-II的任务控制块 标签:  uCOS-II  2009-12-01 14:45 ...

  6. Redis服务器搭建

    下载并解压redis,然后进入redis所在目录   编译安装             make && make install   启动redis 服务 (加上&表示在后台运 ...

  7. [多线程] Web 项目中，少有涉及到的一次多线程编程的经验

    如今框架横行,Spring 已经是非常成熟的容器体系,我们在日常开发 JavaWeb 的工作中,大多已经不需要考虑多线程的问题,这些问题都已经在Spring容器中实现,框架的意义就是让程序员们可以专注 ...

  8. 关于select count

    关于select count,之前有一些不清楚的地方,看到阿里巴巴的Java编程规范,sql规约的第一条就是关于select count的 需要明确以下两点: 1.select count(常量)和s ...

  9. Struts2学习第一天——struts2基本流程与配置

    struts2框架 什么是框架,框架有什么用? 框架 是 实现部分功能的代码 (半成品),使用框架简化企业级软件开发 ,提高开发效率. 学习框架 ,清楚的知道框架能做什么? 还有哪些工作需要自己编码实 ...

  10. 《C#语言和数据库技术基础》单词必备

    <C#语言和数据库技术基础> 第一章1．.NET Framework   框架2．sharp            尖锐,强烈的3．application      应用程序4．devel ...