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 相关文章推荐
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
angularJS开发注意事项
2018/05/26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python列表返回重复数据的下标
2020/02/10 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
客户接待方案
2014/02/26 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
白血病募捐倡议书
2014/05/14 职场文书
入党积极分子个人总结
2015/03/02 职场文书
硕士学位申请报告
2015/05/15 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL