好程式設計師web前端教程分享javascript 練習題

好程式設計師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事件

      

     });