Javascript 实现放大镜效果实例详解


Posted in Javascript onDecember 03, 2016

Javascript 实现放大镜效果

今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!

 

<div id="pic_wrap">
  <div id="float_box"></div>
  <img src="1.jpg">
</div>
<div id="show">
  <img src="1.jpg" id="big_img">
</div>

最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!

img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }

HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!

第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。

第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。

第三步,当鼠标完全移除后,需要加onmouseout事件。

第四步,onmouseover事件需要让放大镜和可视窗口显示出来。

第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。

第六步,onmouseout时间,让放大镜和可是窗口消失!

完整代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /*body {
      margin: 0;
      padding: 0;
    }*/
    img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }
  </style>
</head>
<body>
  <div id="pic_wrap">
    <div id="float_box"></div>
    <img src="1.jpg">
  </div>
  <div id="show">
    <img src="1.jpg" id="big_img">
  </div>
<script src="等比放大镜.js"></script>
<script type="text/javascript">  
  var pic_wrap = document.getElementById('pic_wrap'),
    float_box = document.getElementById("float_box"),
    show = document.getElementById('show');
    big_img = document.getElementById("big_img");
  //鼠标移入事件,让放大镜和放大区显示!
  pic_wrap.onmouseover = function() {
    float_box.style.display = "block";
    show.style.display = "block";
  }
  //鼠标不断移动时触发,实时更新放大镜得到的图片
  pic_wrap.onmousemove = function(event) {
    floatMove(float_box, pic_wrap, event);
    showPic();
  }
  //鼠标移出后,放大镜和放大区隐藏
  pic_wrap.onmouseout = function() {
    float_box.style.display = "none";
    show.style.display = "none";
  }  
      //由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!
  function getStyle(obj, attr) {
    if (window.currentStyle) {
      return parseInt(obj.currentStyle[attr]);
    }
    else {
      return parseInt(getComputedStyle(obj,null)[attr]);
    }
  }
  //运动框架,控制放大镜在原图中的位置!
  function floatMove(argu1, argu2, event) {
    var e = event ||window.event;
    var minLeft = getStyle(argu1, "width");
    var maxLeft = getStyle(argu2, "width") - minLeft/2;
    var minHeight = getStyle(argu1, "height");
    var maxHeight = getStyle(argu2, "height") - minHeight/2;
    console.log(maxLeft);
    console.log(maxLeft - minLeft/2);
    if (e.clientX < minLeft/2) {
      float_box.style.left = "0px";//防止放大镜超出左边框
    }
    else if (e.clientX > maxLeft) {
      float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
    }
    else {
      float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
    }
    if (e.clientY < minHeight/2) {
      float_box.style.top = "0px"; //防止放大镜超出上边框
    }
    else if (e.clientY > maxHeight) {
      float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
    }
    else {
      float_box.style.top = event.clientY - minLeft/2 + "px";
    }
  }
  //用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域
  function showPic() {
    var iCurLeft = getStyle(float_box,"left");
    var iCurTop = getStyle(float_box,"top");
    var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
    var b = getStyle(big_img,"width") - getStyle(show,"width");    
    var moveWidth = -(iCurLeft/a)*b;
    big_img.style.left = moveWidth + "px";
    var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
    var d = getStyle(big_img,"height") - getStyle(show,"height");
    var moveHigth = -(iCurTop/c)*d;
    big_img.style.top = moveHigth + "px";
  }
</script>
</body>
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
Vue实现跑马灯效果
May 25 Javascript
bootstrap模态框垂直居中效果
Dec 03 #Javascript
JS制作类似选项卡切换的年历
Dec 03 #Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
js实现右键自定义菜单
Dec 03 #Javascript
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vuex 使用文档小结篇
2018/01/11 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
详解Python3中的 input() 函数
2020/03/18 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
岗位职责范本
2013/11/23 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
教育科研先进个人材料
2014/01/26 职场文书
消防器材管理制度
2014/01/28 职场文书
希特勒的演讲稿
2014/05/23 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
golang中的struct操作
2021/11/11 Golang
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电