js自制图片放大镜功能

更新时间：2017年01月24日 14:32:53 作者：Jack.Zhong

这篇文章主要为大家详细介绍了js自制图片放大镜功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

js
放大镜

JavaScript cookie原理及使用实例
这篇文章主要介绍了JavaScript cookie原理及使用实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
利用JS实现获取当前系统电量情况
在前端浏览器中我们可以通过使用JavaScript的navigator.getBattery()方法来获取当前系统的电池情况,本文将介绍如何使用这个API以及它在实际应用中的使用,需要的可以参考下
2023-12-12
函数式编程入门实践（一）
这篇文章主要介绍了Javascript函数式编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
js使用oclif开发命令行工具实现批量修改文件名
前端开发工作中常用的很多CLI命令相信大家已经很熟悉了,很方便很实用,能够快速帮助你创建项目,快速执行某些重复性操作,下面我们就来学习一下如何使用CLI命令批量修改文件名吧
2023-12-12
JavaScript 读取元素的CSS信息的代码
在前端开发的工作中，总是会涉及到一些JavaScript和CSS信息交互的内容。
2010-02-02
uniapp中的picker选择器的几种使用场景
本文主要介绍了uniapp中的picker选择器的几种使用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
Javascript优化技巧（文件瘦身篇）
2008-01-01
js判断选择时间不能小于当前时间的示例代码
判断选择时间不能小于当前时间的方法有很多，在本文为大家详细介绍下使用js是如何实现的，感兴趣的朋友可以尝试操作下
2013-09-09
JavaScript模板引擎实现原理实例详解
这篇文章主要介绍了JavaScript模板引擎实现原理,结合实例形式详细分析了JavaScript模板引擎原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-12-12
javascript数组随机排序实例分析
这篇文章主要介绍了javascript数组随机排序的方法,实例分析了javascript数组排序的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07