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 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
js如何验证密码强度
Mar 18 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
生成缩略图
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python中p-value的实现方式
2019/12/16 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
美国玩具公司:U.S.Toy
2018/05/19 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
GWebs公司笔试题
2012/05/04 面试题
设计师个人求职信范文
2014/02/02 职场文书
总裁助理岗位职责
2014/02/17 职场文书
银行求职自荐信
2014/06/30 职场文书
社区文艺活动方案
2014/08/19 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书