每当打开淘宝，天猫等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. 蓝桥网试题 java 基础练习 矩形面积交

    ------------------------------------------------------------------------------------------- 思路见锦囊2 - ...

  2. salesforce 零基础学习（六十四）页面初始化时实现DML操作

    有的时候我们往往会遇到此种类似的需求:用户在访问某个详细的记录时,需要记录一下什么时候哪个用户访问过此页面,也就是说进入此页面时,需要插入一条记录到表中,表有用户信息,record id,sObjec ...

  3. （@WhiteTaken）设计模式学习——单例模式

    单例模式,个人理解就是,使用了这个模式,可以保证一个类只生成唯一的实例对象.就是在整个程序中,这个类只存在一个实例对象. GoF对单例模式的定义:保证一个类,只有一个实例存在,同时提供能对该实例加以访 ...

  4. 笔记之《用python写网络爬虫》

    1 .3 背景调研 robots. txt Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站 ...

  5. js-tab选项卡

    说道tab选项卡,顾名思义,就是切换不同内容分类,想必学过前端的都知道,tab有很多方法可以实现,最近刚跟师傅学了一种,感觉很简便,很实用哦.    一.先看一下结果 二.可以根据图来布局,首先上面标 ...

  6. Spring之IOC讲解

    一.SpringIOC的好处: ioc的思想最核心的地方在于,资源不由使用资源的双方管理,而由不使用资源的第三方管理,这可以带来很多好处. 1.资源集中管理,实现资源的可配置和易管理. 2.降低了使用 ...

  7. DataAdapter&&DataSet 帮助理解小程序

    // 2105/07/08 // DataAdapter&&DataSet using System; using System.Collections.Generic; using ...

  8. Maven入门-4.Maven的依赖

    1.Maven的依赖1.1 添加依赖1.2 依赖范围(sope)依赖范围与classpath的关系1.3 依赖的传递性1.2.1 依赖传递性的冲突问题1. 第一种情况2. 第二种情况1.2.2 通过e ...

  9. ArcGIS许可启动问题

    前段时间,由于360常常删除重要文件终于发生在我身上.不得已换了电脑管家,清理后再次打开License Server Administrator时,发现启动项怎么也点不动了.而打开服务管理器,却发现A ...

  10. Tinyshell: 一个简易的shell命令解释器

    这是自己最近学习Linux系统编程之后写的一个练手的小程序,能很好地复习系统编程中的进程管理.信号.管道.文件等内容. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. ...