jq图片跟随鼠标移动换图

*{
			margin: 0;
			padding: 0;
		}
		ul{
			width:900px;
			margin: 0 auto;
		}
		ul li{
			list-style: none;
			width: 100px;
			height: 100px;
			margin-left: 20px;
			margin-top: 20px;
			float: left;
		}
		ul li img{
			width: 100px;
			height: 100px;
		}
		ul li .active{
			width: 300px;
			height: 300px;
			position: absolute;
		}

	<ul>
			<li><img src="img/1.jpg" /></li>
			<li><img src="img/2.jpg" /></li>
			<li><img src="img/3.jpg" /></li>
			<li><img src="img/4.jpg" /></li>
			<li><img src="img/5.jpg" /></li>
			<li><img src="img/6.jpg" /></li>
			<li><img src="img/7.jpg" /></li>
		</ul>

	// 划入li 时添加节点 
		$("ul li").hover(
			// 划入时  ， 2 滑出时
			function(){
				//创建一个img节点  ， 获取img 信息
				var oimg=$(this).children().attr("src")
				var img=$("<img class='active' src='"+oimg+"' /> ")
				
				$(this).append(img)
			},
			function(){
				$(this).children(".active").remove()
				
				
			}
			
		)
		// 鼠标跟随
		
		$("ul li").on("mousemove",function(e){
			var xx=e.pageX
			var yy=e.pageY
			console.log(yy)
			$(".active").css({
				"left":xx,
				"top":yy
			})
			
			
		})