ITPub博客

首页 > 应用开发 > Java > 好程序员web前端教程分享javascript 练习题

好程序员web前端教程分享javascript 练习题

原创 Java 作者:好程序员IT 时间:2019-11-14 19:41:15 0 删除 编辑

好程序员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事件

      

     });

 

 


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2664231/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
欢迎关注公众号:好程序员特训营 web前端教程分享 723729549 大数据教程分享 703503210

注册时间:2019-03-20

  • 博文量
    524
  • 访问量
    305993