每当打开淘宝，天猫等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. EF6的多线程与分库架构设计实现

    1.项目背景 这里简单介绍一下项目需求背景,之前公司的项目基于EF++Repository+UnitOfWork的框架设计的,其中涉及到的技术有RabbitMq消息队列,Autofac依赖注入等常用的 ...

  2. webAppbuilder微件使用教程3 地理处理微件

    webAppbuilder微件使用教程 --微件使用进阶地理处理微件 By 李远祥 地理处理是GIS解决问题的关键部分,也是其灵魂所在.由于WebAppBuilder框架的限制,用户如果想要非常灵活的 ...

  3. didReceiveMemoryWarning-内存警告处理方法-iOS

    前言 当app出现内存警告的时候会怎么办 正文 ios6.0之后,内存警告的viewDidUnload 被屏蔽,即又回到了ios3.0的时期的内存管理方式. iOS6.0及以上版本的内存警告:调用di ...

  4. MATLAB 单变量函数一阶及N阶求导

    1 对一维函数的求导及求特定函数处的变量值 %%最简单的一阶单变量函数进行求导 function usemyfunArray() %主函数必须位于最上方 clc clear syms x %syms ...

  5. java集合框架02——Collection架构与源码分析

    Collection是一个接口,它主要的两个分支是List和Set.如下图所示: List和Set都是接口,它们继承与Collection.List是有序的队列,可以用重复的元素:而Set是数学概念中 ...

  6. Python学习--21 电子邮件

    发送邮件 SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责 ...

  7. ABP框架 - 嵌入资源

    文档目录 本节内容: 简介 创建嵌入文件 xproj/project.json 格式 csproj 格式 添加到嵌入式资源管理器 使用嵌入式视图 使用嵌入式资源 ASP.NET Core 配置 忽略文 ...

  8. Entity Framework Code First约定

    Code First使你能够通过C# 或者 Visual Basic .NET来描述模型,模型的基本规则通过使用约定来进行检查,而约定就是一系列内置的规则. 在Code First中基于类的定义通过一 ...

  9. POJ 3356 AGTC(DP求字符串编辑距离)

    给出两个长度小于1000的字符串,有三种操作,插入一个字符,删除一个字符,替换一个字符. 问A变成B所需的最少操作数(即编辑距离) 考虑DP,可以用反证法证明依次从头到尾对A,B进行匹配是不会影响答案 ...

  10. [Selenium With C#学习笔记] Lesson-01环境搭建

    Step-1:准备所需的开发环境.浏览器驱动.Selenium-Webdriver.单元测试框架,因目前使用C#的开发神器都Visual Studio,本文也打算采用Visual Studio 201 ...