jq图片跟随鼠标移动换图

1. *{
2.      margin: 0;
3.      padding: 0;
4.    }
5.    ul{
6.      width:900px;
7.      margin: 0 auto;
8.    }
9.    ul li{
10.       list-style: none;
11.       width: 100px;
12.       height: 100px;
13.       margin-left: 20px;
14.       margin-top: 20px;
15.       float: left;
16.     }
17.     ul li img{
18.       width: 100px;
19.       height: 100px;
20.     }
21.     ul li .active{
22.       width: 300px;
23.       height: 300px;
24.       position: absolute;
25.     }

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

1.  // 划入li 时添加节点 
2.    $("ul li").hover(
3.      // 划入时  ， 2 滑出时
4.      function(){
5.        //创建一个img节点  ， 获取img 信息
6.        var oimg=$(this).children().attr("src")
7.        var img=$("<img class='active' src='"+oimg+"' /> ")
8. 
9.        $(this).append(img)
10.       },
11.       function(){
12.         $(this).children(".active").remove()
13. 
14. 
15.       }
16. 
17.     )
18.     // 鼠标跟随
19. 
20.     $("ul li").on("mousemove",function(e){
21.       var xx=e.pageX
22.       var yy=e.pageY
23.       console.log(yy)
24.       $(".active").css({
25.         "left":xx,
26.         "top":yy
27.       })
28. 
29. 
30.     })
31. 
32.