jquery中指针不在float层正中间?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery标签切换效果</title>
<link rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
#demo{
width:1200px;
height:600px;
margin:0 auto;
overflow:hidden;
}
#small{
width:200px;
height:200px;
position:relative;
z-index:1;
overflow:hidden;
}
#big{
margin-left:300px;
position:relative;
width:400px;
height:400px;
display:none;
overflow:hidden;
}
#float{
position:absolute;
z-index:10;
width:50px;
height:50px;
background:rgba(250,250,0,0.7);
display:none;
left:0;
top:0;
}
img{
display:block;
position:absolute;
}
</style>
</head>
<body>
<div id="demo">
<div id="small">
<div id="float"></div>
<img src="img/small.jpg" alt="" />
</div>
<div id="big">
<img src="img/big.jpg" alt="" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
<script>
$(function(){
var demo=$("#demo");
var small=$("#small");
var float=$("#float");
var big=$("#big");
var img1=$("#small > img:first");
var img2=$("#big > img:first");
img1.on("mouseenter",function(){
float.css("display","block");
big.css("display","block");
});
img1.on("mouseleave",function(){
float.css("display","none");
big.css("display","none");
});
img1.on("mousemove",function(e){
var left=e.clientX-float.width()/2-demo.offset().left-small.offset().left;
var top=e.clientY-float.height()/2-demo.offset().top-small.offset().top;
if(left<0){
left=0;
}else if(left>(small.width()-float.width())){
left=small.width()-float.width();
}
if(top<0){
top=0;
}else if(top>(small.height()-float.height())){
top=small.height()-float.height();
}
float.css({"left":left+"px",
"top":top+"px"});
var x=left/(small.width()-float.width());
var y=top/(small.height()-float.height());
var offsetX=x*(big.width()-img2.width())+"px";
var offsetY=y*(big.height()-img2.height())+"px";
img2.css({
"left":offsetX,
"top":offsetY
});
});
});
</script>
</body>
</html>同时,这在chrome和safari下面也会出现闪动