为了账号安全,请及时绑定邮箱和手机立即绑定

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下面也会出现闪动

正在回答

举报

0/150
提交
取消

jquery中指针不在float层正中间?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号