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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
javascript判断一个变量是数组还是对象
Apr 10 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
phpwind中的数据库操作类
2007/01/02 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP中each与list用法分析
2016/01/08 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
协议书与合同的区别
2014/04/18 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
罗马假日观后感
2015/06/08 职场文书
市级三好生竞选稿
2015/11/21 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
python基础之模块的导入
2021/10/24 Python