JQ实战天猫淘宝放大镜
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ实战天猫淘宝放大镜相关的知识，希望对你有一定的参考价值。
这个特效平时生活中很常见，话不多说先上效果图。
首先布局，遮罩层是这个效果中的重点精华，也就是下面代码中的shade.
<style> * { margin:0px; padding:0px;} #box { width:400px; height:400px; border:5px solid #CCC; margin:100px auto; position:relative;} #box .simg {width:400px; height:400px; position:relative;} #box .simg span.move { width:150px; height:150px; background:red; position:absolute; top:0; left:0; display:block; filter:alpha(opacity=50); opacity:0.5; display:none;} #box .simg span.shade { width:100%; height:100%; position:absolute; top:0; left:0;filter:alpha(opacity=40); opacity:0.4;} #box .bimg { width:300px; height:300px; position:absolute; left:430px; top:50px; overflow:hidden; display:none;} #box .bimg img { position:absolute;} </style> </head> <body> <div id="box"> <div class="simg"> <img src="images/simg.jpg"/> <span class="move"></span> <span class="shade"></span> </div> <div class="bimg"><img src="images/bimg.jpg"/></div> </div>
接下来是JS部分，在实现放大的效果时，小图滑动的比例与大图定位时的相对应的ｔｏｐ，ｌｅｆｔ，是效果的关键。
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script> $(function(){ $(".shade").hover(function(){ $(".move").show(); $(".bimg").show(); },function(){ $(".move").hide(); $(".bimg").hide(); }); $(".shade").mousemove(function(e){ var l=e.clientX; var t=e.clientY; var _top=t-$("#box").offset().top-$(".move").height()/2+"px"; var _left=l-$("#box").offset().left-$(".move").width()/2+"px"; //不让从上面和下面出去 if(parseInt(_top)<0){ _top=0+‘px‘; }else if(parseInt(_top)>parseInt($("#box").height()-$(".move").height())){ _top=parseInt($("#box").height()-$(".move").height())+"px"; } //不让从两边出去 if(parseInt(_left)<0){ _left=0+"px"; }else if(parseInt(_left)>parseInt($("#box").width()-$(".move").width())){_left=parseInt($("#box").width()-$(".move").width())+‘px‘;} $(".move").css({top:_top,left:_left}); //小图可滑动的比例 var hd_x=parseInt(_left)/parseInt($("#box").width()-$(".move").width()); var hd_y=parseInt(_top)/parseInt($("#box").height()-$(".move").height()); //大图对应的top left var bm_left=($(".bimg img").width()-$(".bimg").width())*hd_x; var bm_top=($(".bimg img").height()-$(".bimg").height())*hd_y; $(".bimg img").css({top:-bm_top,left:-bm_left}); }); }); </script>
最后写的有点快，代码不够简洁，注释也挺恶心，有时间修正。
以上是关于JQ实战天猫淘宝放大镜的主要内容，如果未能解决你的问题，请参考以下文章