当前位置:首页 >> 网络编程

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="/UploadFiles/2021-04-02/jquery.min.js">

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