好程序员web前端教程分享 前端 javascript 练习题 ， 图片跟着鼠标飞：

  //图片跟着鼠标飞,可以在任何的浏览器中实现

   //window.event和事件参数对象e的兼容

   //clientX和clientY单独的使用的兼容代码

   //scrollLeft和scrollTop的兼容代码

   //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

   //把代码封装在一个函数

   //把代码放在一个对象中

   var  evt = {

     //window.event和事件参数对象e的兼容

     getEvent : function   (evt)   {

       return  window . event || evt ;

     },

     //可视区域的横坐标的兼容代码

     getClientX : function   (evt)   {

       return   this . getEvent ( evt ). clientX ;

     },

     //可视区域的纵坐标的兼容代码

     getClientY : function   (evt)   {

       return   this . getEvent ( evt ). clientY ;

     },

     //页面向左卷曲出去的横坐标

     getScrollLeft : function   ()   {

       return  window . pageXOffset || document . body . scrollLeft || document . documentElement . scrollLeft || 0 ;

     },

     //页面向上卷曲出去的纵坐标

     getScrollTop : function   ()   {

       return  window . pageYOffset || document . body . scrollTop || document . documentElement . scrollTop || 0 ;

     },

     //相对于页面的横坐标(pageX或者是clientX+scrollLeft)

     getPageX : function   (evt)   {

       return   this . getEvent ( evt ). pageX ?   this . getEvent ( evt ). pageX : this . getClientX ( evt ) + this . getScrollLeft ();

     },

     //相对于页面的纵坐标(pageY或者是clientY+scrollTop)

     getPageY : function   (evt)   {

       return   this . getEvent ( evt ). pageY ? this . getEvent ( evt ). pageY : this . getClientY ( evt ) + this . getScrollTop ();

     }

   };

   //最终的代码

  document . onmousemove = function   (e)   {

     my$ ( "im" ). style . left = evt . getPageX ( e ) + "px" ;

     my$ ( "im" ). style . top = evt . getPageY ( e ) + "px" ;

   };

钢琴版导航条：
css样式：

  *   {

       margin :  0 ;

       padding :  0 ;

       list-style :  none ;

     }

     .nav   {

       width :  900px ;

       height :  60px ;

       background-color :  black ;

       margin :  0 auto ;

     }

     .nav li   {

       width :  100px ;

       height :  60px ;

       /*border: 1px solid yellow;*/

       float :  left ;

       position :  relative ;

       overflow :  hidden ;

     }

     .nav a   {

       position :  absolute ;

       width :  100% ;

       height :  100% ;

       font-size :  24px ;

       color :  blue ;

       text-align :  center ;

       line-height :  60px ;

       text-decoration :  none ;

       z-index :  2 ;

     }

     .nav span   {

       position :  absolute ;

       width :  100% ;

       height :  100% ;

       background-color :  yellow ;

       top :  60px ;

     }

jq实现代码： 需要引入jq文件

$ ( function   ()   {

       //给li注册鼠标进入事件,让li下面的span top：0  播放音乐

       $ ( ".nav li" ). mouseenter ( function   ()   {

         $ ( this ). children ( "span" ). stop (). animate ({ top :   0 });

         //播放音乐

         var  idx =   $ ( this ). index ();

         $ ( ".nav audio" ). get ( idx ). load ();

         $ ( ".nav audio" ). get ( idx ). play ();

       }). mouseleave ( function   ()   {

         $ ( this ). children ( "span" ). stop (). animate ({ top :   60 });

       });

       //节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次

       //1. 定义一个flag

       var  flag =   true ;

       //按下1-9这几个数字键，能触发对应的mouseenter事件

       $ ( document ). on ( "keydown" ,   function   (e)   {

         if ( flag )   {

          flag =   false ;

           //获取到按下的键

           var  code =  e . keyCode ;

           if ( code >=   49   &&  code <=   57 ){

             //触发对应的li的mouseenter事件

             $ ( ".nav li" ). eq ( code -   49 ). mouseenter ();

           }

         }

       });

       $ ( document ). on ( "keyup" ,   function   (e)   {

        flag =   true ;

         //获取到按下的键

         var  code =  e . keyCode ;

         if ( code >=   49   &&  code <=   57 ){

           //触发对应的li的mouseenter事件

           $ ( ".nav li" ). eq ( code -   49 ). mouseleave ();

         }

       });

       //弹起的时候，触发mouseleave事件

     });