当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。 
我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码：

 <!doctype html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

         <style type="text/css">

             *{margin:0px; padding:0px;}

             .small-box {

                 width:300px;

                 height:300px;

                 margin-left:100px;

                 margin-top:100px;

                 border:1px #ccc solid;

                 cursor:move;

                 float:left;

                 position:relative;

             }

             .small-box img {

                 width:300px;

                 height:300px;

             }

             .tool {

                 width:150px;

                 height:150px;

                 background-color:gold;

                 opacity:0.6;

                 filter:alpha(opacity=60);

                 position:absolute;

                 left:0px;

                 top:0px;

                 display:none;

             }

             .tool.active {

                 display:block;

             }

             .big-box {

                 width:300px;

                 height:300px;

                 border:1px #ccc solid;

                 overflow:hidden;

                 float:left;

                 margin-top:100px;

                 position:relative;

                 display:none;

             }

             .big-box.active {

                 display:block;

             }

             .big-box img {

                 width:600px;

                 height:600px;

                 position:absolute;

             }

         </style>

     </head>

     <body>

         <div class="small-box" id="smallBox">

             <img src="img1.jpg"/>

             <div class="tool" id="tool"></div>

         </div>

         <div class="big-box" id="bigBox">

             <img src="img1.jpg" id="bigImg" />

         </div>

         <script>

             /*

                 第一步：当页面加载完后，获取所要操作的节点对象。

                 第二步：为smallBox添加一个鼠标浮动事件

                             当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子tool

                             和右边的大盒子（小黄盒子的放大版）bigBox

                             添加active

                         为smallBox添加一个鼠标离开事件

                             隐藏小黄盒子和右边的大盒子

                             去掉active

                 第三步：为smallBox添加一个鼠标移动事件

                         小黄盒子tool要跟着鼠标的坐标移动

                         右边的大盒子里的图片也跟着指定的比例移动

             */

             var smallBox = document.getElementById("smallBox");//小盒子

             var tool = document.getElementById("tool");//小盒子中的黄色区域

             var bigBox = document.getElementById("bigBox");//大盒子

             var bigImg = document.getElementById("bigImg");//放大的图片

             //鼠标进入小盒子区域内，显示黄色区域和大盒子

             smallBox.onmouseenter = function(){

                 tool.className = "tool active";

                 bigBox.className = "big-box active";

             }

             //鼠标离开小盒子区域，不显示黄色区域和大盒子

             smallBox.onmouseleave = function(){

                 tool.className = "tool";

                 bigBox.className = "big-box";

             }

             //鼠标在小盒子内移动

             smallBox.onmousemove = function(e){

                 var _e = window.event||e;//事件对象

                 var x = _e.clientX-this.offsetLeft-tool.offsetWidth/2;//事件对象在小盒子内的横向偏移量

                 var y = _e.clientY-this.offsetTop-tool.offsetHeight/2;//竖向偏移量

                 if(x<0){

                     x = 0;//当左偏移出小盒子时，设为0

                 }

                 if(y<0){

                     y = 0;//当上偏移出小盒子时，设为0

                 }

                 if(x>this.offsetWidth-tool.offsetWidth){

                     x = this.offsetWidth-tool.offsetWidth;//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度

                 }

                 if(y>this.offsetHeight-tool.offsetHeight){

                     y = this.offsetHeight-tool.offsetHeight;//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度

                 }

                 tool.style.left = x + "px";//黄色放大区域距离小盒子左偏距

                 tool.style.top = y + "px";//黄色放大区域距离小盒子上偏距

                 bigImg.style.left = -x*2 + "px";//放大图片移动方向相反，偏移距离加倍

                 bigImg.style.top = -y*2 + "px";

             }

         </script>

     </body>

 </html>

这里，我并没有对代码中css样式，JavaScript行为进行和html结构的分离，方便读者阅读和运行。 
有读者可能考虑，获取事件对象的偏移距离时直接使用offsetX和offsetY属性，省去了计算，但是笔者在试验时，出现了异常，黄色放大区域并不能稳定的随着鼠标进行移动，笔者认为，当时用offsetX和offsetY时，执行onmousemove会不断地出发onmouseover，而onmouseover会产生事件传播，从而导致在获取offsetX时出现异常。最终，笔者采用上述代码中的方法，能够出现稳定的效果。读者可以自行运行代码，查看效果。这里附上笔者的效果图：

原生javascript实现图片放大镜效果的更多相关文章

  1. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

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

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

  4. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  5. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  6. javascript 实现图片放大镜功能

    淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

  9. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

随机推荐

  1. Android---Parcelable包装类的作用

    android提供了一种新的类型:Parcel.本类被用作封装数据的容器,封装后的数据可以通过Intent或IPC传递. 除了基本类型以外,只有实现了Parcelable接口的类才能被放入Parcel ...

  2. 配置jboss4.2.3GA启用SSL

    转帖保存 配置jboss的HTTP请求走SSL(HTTPS协议) l         生成keystore 文件 用keytool生成server.keystore文件: 进入命令行 C:\Docum ...

  3. ARC下需要注意的内存管理

    ARC下需要注意的内存管理 2016/04/03 · iOS开发 · 内存管理 分享到:1 原文出处: 一不(@luoyibu)    之前发了一篇关于图片加载优化的文章,还是引起很多人关注的,不过也 ...

  4. 基于css3的环形动态进度条（原创）

    基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...

  5. windows服务器下IIS7 安装URL Rewrite（URL重写）模块

    URL Rewrite Module是一个基于规则的URL重写引擎,用于在URL被Web服务器处理之前改变请求的URL.对于动态Web应用程序,它可以为用户和seo/seo.html" ta ...

  6. SqlServer tsql语句大全

    下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE, ...

  7. JavaScriptConvert.SerializeObject转换出错

    The length of the string exceeds the value set on the maxJsonLength property(字符串的长度超过maxjsonlength上设 ...

  8. 【转】一大波实用的 bash 别名和函数

    作为一个命令行探索者,你或许发现你自己一遍又一遍重复同样的命令.如果你总是用ssh进入到同一台电脑,如果你总是将一连串命令连接起来,如果你总是用同样的参数运行一个程序,你也许希望在这种不断的重复中为你 ...

  9. 64脚和小于64脚的STM32进行AD时注意，参照电源处理方法（转）

    源:64脚和小于64脚的STM32进行AD时注意,参照电源处理方法 请注意,ADC_IN17上没有内部基准,将其说成基准电压概念不对. 所以横线以下的理解不对,如果将其做为参考,则其电压假定按1.2V ...

  10. Cocos2d-x 的“HelloWorld” 深入分析

    本节所用Cocos2d-x版本:cocos2d-1.0.1-x-0.12.0 不能免俗,一切都从“HelloWorld!”开始.打开HelloWorld工程,里面有两个文件目录Classes和win3 ...