JQuery练习——图片跟随首先，我们得了解JQuery中这五个事件。一.body部分小的图片放在页面下，待鼠标移入

首先，我们得了解JQuery中这五个事件。

mouseover  鼠标移入
mouseout  鼠标移出
mousemove 鼠标移动
bind 绑定事件
offset 设置坐标

一.body部分

小的图片放在页面下，待鼠标移入再显示大的图片

<body>

   <img id="small" src="img/small.jpg" />
   
   <div id="showBig">
      <img src="img/big.jpg">
   </div>

</body>

二.用JQuery五个事件实现图片跟随

<script type="text/javascript">
   $(function(){
      $("#small").bind("mouseover mouseout mousemove",function (event) {
         if (event.type == "mouseover") {
            $("#showBig").show();
         } else if (event.type == "mousemove") {
            console.log(event);
            $("#showBig").offset({
               left: event.pageX + 10,
               top: event.pageY + 10
            });
         } else if (event.type == "mouseout") {
            $("#showBig").hide();
         }
      });
   });
</script>