未加星标

js自制图片放大镜功能

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例为大家分享了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是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AndroidUT
分页:12
转载请注明
本文标题:js自制图片放大镜功能
本站链接:http://www.codesec.net/view/530162.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(15)