js自制图片放大镜功能

2019-11-19 17:47:29

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

注释：
small img size：600x400
big img size：1200x800

原理：
1、大图是小图的 2倍整
2、大图以小图片中心点为中心
      a.transform : translate(-50%,-50%)
     b.(rate-0.5)*50%
      c.clip : rect(t,r,b,l) 以小图边界为边界
3、rect必须有absolute
4、获取鼠标在图片中的位置
     a.获取鼠标位置 XY
    b.获取图片位置、宽度、高度
             i.得到鼠标在图片的百分比位置
             ii.将百分比位置应用于大图 left，top

问题：
居中理解太差：
          absolute ,left ,top,right,bottom,margin
放大缩小问题：
           起初： transform： scale() 缩放
           利用 transition 过渡
                 结果，采用这种方法会使得鼠标移动时很卡顿
                       可能原因：每次hover 都会触发 transition事件
           解决方法：采用了 Animate 动画来实现缩放

细节：
以 onmouse 事件 e 动态获得 e.pageX 和 e.pageY
以 $().offset().top /left 获取图片位置
以 $().width() /height() 获取图片宽高
      在错误的操作中也忘了获取 class 的方法
           $().attr("class")
           $().prop("class")
                    event.traget.className

如果要实现 hover出现透明的块状就在外部 opacity:0.5; 设置z-index就可以了。

<html> <head>  <meta charset="UTF-8">  <title>WEBGOD</title>  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>  <style type="text/css">   #warpper{    margin: 0 auto;    padding: 0;    position: relative;    z-index: 1;    width: 600px;    height: 400px;   }   .small{    text-align: center;   }   .big{    display: none;    clip: rect(200px,900px,600px,300px);    position: absolute;    width: 1200px;    height: 800px;    top: 50%;    left:50%;    transform: translate(-50%,-50%);   }   .big img{    position: absolute;    width: 600px;    height: auto;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;   }  </style> </head> <body>     <div id="warpper">   <div class="small">    <img src="img/small_19.jpg"/>   </div>   <div class="big">    <img src="img/img_19.jpg"/>   </div>  </div>  <script type="text/javascript">   $(function(){    var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;    $("#warpper").hover(function(){     $(".big").css("display","block");     $(".big img").animate({"width":"1200px"},500);    },function(){     $(".big img").animate({"width":"600px"},1);     $(".big").css("display","none");    })    $("#warpper").on("mousemove",function(e){     x = e.pageX;     y = e.pageY;     top = $(".small img").offset().top;     left = $(".small img").offset().left;     width = $(".small img").width();     height = $(".small img").height();     //     imgWidth = $(".big img").width();     imgHeight = $(".big img").height();     rateX = (left+width-x)/width;     rateY = (top+height-y)/height;     if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){      $(".big img").css("left",(rateX-0.5)*50+"%");      $(".big img").css("top",(rateY-0.5)*50+"%");     }    })   })  </script> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JSON键值对序列化和反序列化解析

下一篇：JS中绑定事件顺序（事件冒泡与事件捕获区别）