jq案例中遇到的知识点总结(会飞的小鸟和三级联动)

1、会飞的小鸟 ，按键盘的上下左右键，小鸟会上下左右的飞

知识点：1、keyCode 键盘按键对应的数字 比如 左上右下键 对应 37 38 39 40；

              2、小鸟的位置：var bBird=$("#bird").offset();

                     屏幕宽度：var wWidth=$(window).width();

                     屏幕高度：var wHeight=$(window).height();

                     小鸟的宽度:var bWidth=$("#bird").width();

                    小鸟的高度：var bHeight=$("#bird").height();

               3、键盘按下事件触发$(body).keydown(function(e){});//e.keyCode即按下的键

               4、规定小鸟的步长 step = 10；

               5、用switch(kCode){

                               case 37:break;

                               case 38:break;   

                               case 39:break;  

                               case 40:break;  

                               }

                     分别判断按键后小鸟的位置

                    当按39小鸟向右飞时，小鸟的位置 += step;并判断如果小鸟的位置大于了屏幕的宽度，小鸟回到屏幕左边，对应代码如下：

                      if(bBird >=wWidth){bBird = -bWidth};

                     其他同理；

                     判断后输出 ：$("#bird").offset(bBird);

              6、小鸟头的方位，如果向右飞头向右，向左飞头向左...

                  css 设置小鸟的方位 .direction-37{transform:rotateY(180deg)};direction-38{transform:rotate(-30deg)};direction-40{transform:rotate(60deg)};

                 设定rCode =39;

                 让keycode与rCode比较，如果不相等则移除原来的class 加了新的class代码如下：

                 if(e.keycode !=rCode){$("#bBidr").removeClass().addClass("direction-"+e.keycode)};

                     rCode=e.keycode;

 

              

            

                      

转载于:https://www.cnblogs.com/colorful-paopao1/p/8406070.html