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 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
Express的路由详解
Dec 10 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
apache mysql php 源码编译使用方法
2012/05/03 PHP
php以post形式发送xml的方法
2014/11/04 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python多项式回归的实现方法
2019/03/11 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
护理专业推荐信
2013/11/07 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
财务主管岗位职责
2014/02/28 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
投资申请报告
2015/05/19 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
用Python可视化新冠疫情数据
2022/01/18 Python