js自制图片放大镜,js图片放大镜,js放大镜本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
js自制图片放大镜,js图片放大镜,js放大镜
|
