                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /用JS實現放大鏡特效

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下面也會出現閃動