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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JS实现图片切换效果
Nov 17 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
微信小程序Echarts图表组件使用方法详解
Jun 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
德生PL990的分析评价
2021/03/02 无线电
PHP开发APP端微信支付功能
2017/02/17 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
减负增效提质方案
2014/05/23 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
运动会加油稿20字
2014/11/15 职场文书
召开会议通知范文
2015/04/15 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang