原生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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
移动端js图片查看器
Nov 17 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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上传、管理照片示例
2006/10/09 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
天网工程实施方案
2014/03/26 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
领导干部学习心得体会
2016/01/23 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
神州牡丹园的导游词
2019/11/20 职场文书