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


Posted in Javascript onJanuary 18, 2017

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

<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实现图片放大镜效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
You might like
PHP数据缓存技术
2007/02/14 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
javascript实现yield的方法
2013/11/06 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
Python中特殊函数集锦
2015/07/27 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Python读取properties配置文件操作示例
2018/03/29 Python
基于python实现百度翻译功能
2019/05/09 Python
如何基于Python实现数字类型转换
2020/02/07 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python利用线程实现多任务
2020/09/18 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
10个顶级Python实用库推荐
2021/03/04 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
华为慧通笔试题
2016/04/22 面试题
捐助感谢信
2015/01/22 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python