这篇文章主要为大家详细介绍了 js 自制图片放大镜功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
注释: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>
来源: http://www.phperz.com/article/17/0530/328148.html