js自制图片放大镜功能


Posted in Javascript onJanuary 24, 2017

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

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

Javascript 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 #Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 #Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 #Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 #Javascript
Jquery树插件zTree实现菜单树
Jan 24 #Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 #Javascript
树结构之JavaScript
Jan 24 #Javascript
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python非递归全排列实现方法
2017/04/10 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
PHP统计代码行数的小代码
2019/09/19 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
《可爱的动物》教学反思
2014/02/22 职场文书
学生会主席演讲稿
2014/04/25 职场文书
超市客服工作职责
2014/06/11 职场文书
毕业生实习证明
2014/09/19 职场文书
农村党员对照检查材料
2014/09/24 职场文书
《司马光》教学反思
2016/02/22 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书