上班无聊 写了个简单的仿淘宝图片放大镜的问题
以后再碰到这类问题 直接复制好了
html代码:
<body>
<div class="all">
<div class="big">
<img src="images/00001.jpg" width="160px;" height="160px" />
<div class="small"></div>
<div class="show"></div>
</div>
</div>
</body>
CSS代码：
*{
padding:0px;
margin:0px;
border:0px;}
.all{
margin:0 auto;
width:960px;
}
.big{
float:left;
width:160px;
height:160px;
border:2px solid #CCC;
padding:3px;
margin-top:100px;}
.big .small{
width:50px;
height:50px;
position:absolute;
top:0px;
left:300px;
background:#CFF;
opacity:0.75;
display:none;}
.big .show{
width:275px;
height:150px;
padding:3px;
position:absolute;
top:100px;
left:500px;
display:none;
background:url(../images/00001.jpg) no-repeat left top;
border:1px solid #666;}
JQ代码：
var topset=0;
var leftset=0;
$(document).ready(function(e) {
$(".big").mouseleave(function(){
$(".small").css({"top":LTY,"left":LTX,"display":"none"});
$(".show").css("display","none");
}).mousemove(function(e){
topset=$(this).offset().top;
leftset=$(this).offset().left;
if(e.pageX<185)
LTX=160;
else if(e.pageX>301)
LTX=276;
else
LTX=e.pageX-25;
if(e.pageY<125)
LTY=100;
else if(e.pageY>241)
LTY=221;
else
LTY=e.pageY-25;
$(".small").css({"top":LTY,"left":LTX,"display":"block"});
position_x="-"+Math.round((LTX-160)/160*550)+"px";
position_y="-"+Math.round((LTY-100)/160*375)+"px";
pl=position_x+" "+position_y;
$(".show").css({"display":"block","background-position":pl});
});
});