原生javascript实现图片放大镜效果

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

<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时出现异常。最终，笔者采用上述代码中的方法，能够出现稳定的效果。读者可以自行运行代码，查看效果。这里附上笔者的效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularjs点击图片放大实现上传图片预览

    angularjs点击图片放大实现上传图片预览

    本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span

  • JS图片放大效果简单实现代码

    本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30p

  • js实现图片放大展示效果

    js实现图片放大展示效果

    图片放大展示效果的实现代码,可动态生成图片,每次点击看原图的时候为当前id里面的图片 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="node_modules/jquery/jquery.js"></script> <style> *{

  • 原生js实现图片放大缩小计时器效果

    知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时,清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • js图片放大镜效果实现方法详解

    js图片放大镜效果实现方法详解

    由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{

  • 利用javascript实现的三种图片放大镜效果实例（附源码）

    利用javascript实现的三种图片放大镜效果实例（附源码）

    本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端:大家可以直接下载源码进行学习参考,下面来一起学习学习吧. 实现效果如下 效果一 效果二 效果三 调用代码如下 //前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: zoom('#item').init(); //这里写0,或者不写都可以,默认0 zoom('#item').init(1); //效果2 zoom('#item').init(2); //效果3 //另外还有一个参数,就是选择器后面写

  • 原生js代码实现图片放大境效果

    原生js代码实现图片放大境效果

    今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE

  • JS实现图片放大缩小的方法

    本文实例讲述了JS实现图片放大缩小的方法.分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来.我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试):第二种方法只能兼容IE. 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inhe

  • js实现图片旋转 js滚动鼠标中间对图片放大缩小

    js实现图片旋转 js滚动鼠标中间对图片放大缩小

    从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j

  • js自制图片放大镜功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 注释: small img size:600x400 big img size:1200x800 原理: 1.大图是小图的 2倍整 2.大图以小图片中心点为中心       a.transform : translate(-50%,-50%)       b.(rate-0.5)*50%       c.clip : rect(t,r,b,l) 以小图边界为边界 3.rect必须有absolute 4.获取鼠标

随机推荐