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 用原型继承来实现对象系统
Mar 22 Javascript
js格式化时间小结
Nov 03 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解Vuex中mapState的具体用法
2017/09/28 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python最基本的输入输出详解
2015/04/25 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python requests使用socks5的例子
2019/07/25 Python
python使用配置文件过程详解
2019/12/28 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
详解Python 函数参数的拆解
2020/09/02 Python
python-地图可视化组件folium的操作
2020/12/14 Python
学校与家长安全责任书
2014/07/23 职场文书
销售顾问工作计划书
2014/09/15 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
二审答辩状格式
2015/05/22 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
初一语文教学反思
2016/03/03 职场文书
如何做好工作总结!
2019/04/10 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python