js自制图片放大镜功能
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
注释：
smallimgsize：600x400
bigimgsize：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>
<metacharset="UTF-8">
<title>WEBGOD</title>
<linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="js/bootstrap.min.js"type="text/javascript"charset="utf-8"></script>
<styletype="text/css">
#warpper{
margin:0auto;
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%);
}
.bigimg{
position:absolute;
width:600px;
height:auto;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<divid="warpper">
<divclass="small">
<imgsrc="img/small_19.jpg"/>
</div>
<divclass="big">
<imgsrc="img/img_19.jpg"/>
</div>
</div>
<scripttype="text/javascript">
$(function(){
varx,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
$("#warpper").hover(function(){
$(".big").css("display","block");
$(".bigimg").animate({"width":"1200px"},500);
},function(){
$(".bigimg").animate({"width":"600px"},1);
$(".big").css("display","none");
})
$("#warpper").on("mousemove",function(e){
x=e.pageX;
y=e.pageY;
top=$(".smallimg").offset().top;
left=$(".smallimg").offset().left;
width=$(".smallimg").width();
height=$(".smallimg").height();
//
imgWidth=$(".bigimg").width();
imgHeight=$(".bigimg").height();
rateX=(left+width-x)/width;
rateY=(top+height-y)/height;
if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){
$(".bigimg").css("left",(rateX-0.5)*50+"%");
$(".bigimg").css("top",(rateY-0.5)*50+"%");
}
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。