zoukankan      html  css  js  c++  java
  • 【网络公开课总结】会飞的小鸟,removeClass() 方法从被选元素移除一个或多个类。

    removeClass() 方法从被选元素移除一个或多个类。
    注释:如果没有规定参数,则该方法将从被选元素中删除所有类。
    语法
    $(selector).removeClass(class)

    参数 class     
    可选。规定要移除的 class 的名称。
    如需移除若干类,请使用空格来分隔类名。
    如果不设置该参数,则会移除所有类。


      var bird = $("#dbird");
      bird.removeClass().addClass('direction-' + code)
    #dbird 的样式不会被移除掉,只会移除掉css类的。

     css

    * {
        padding: 0px;
        margin: 0px;
    }
    
    body {
        overflow: hidden;
    }
    
    #dbird {
        position: absolute;
        width: 206px;
        height: 121px;
    }
    .direction-37 {
        transform: rotateY(180deg);
    }
    .direction-38 {
        transform: rotate(-60deg);
    }
    .direction-40 {
        transform: rotate(60deg);
    }

    js

    /// <reference path="jquery-1.10.2.min.js" />
    
    $(function () {
        var bird = $("#dbird");//获取到了小鸟的对象
        var off = bird.offset();//获取到小鸟的方位的对象
        var icount = 10;//小鸟一次移动的位置
        var keyrecord = 39;
        var birdSize = {  bird.width(), height: bird.height() };//获取到小鸟的大小
        var docSize = {  $(window).width(), height: $(window).height() };//获取到当前浏览器的高度和宽度
        $(document).keydown(function (event) {//对网页按下键盘的键的时候触发一个事件,event事件源
            var code = event.keyCode;//获取事件源的编码
            if (keyrecord != code) {
                bird.removeClass().addClass('direction-' + code)
            }
            keyrecord = code;
            switch (code) {
                case 37://左键
                    off.left -= icount;
                    if (off.left < -birdSize.width) {
                        off.left = docSize.width;
                    }
                    break;
                case 38://上键
                    off.top -= icount;
                    if (off.top < -birdSize.height) {
                        off.top = docSize.height;
                    }
                    break;
                case 39://右键
                    off.left += icount;
                    if (off.left > docSize.width) {//当小鸟移动到浏览器的最右边的时候,让它回到浏览器的最左边
                        off.left = -birdSize.width;
                    }
                    break;
                case 40://下键
                    off.top += icount;
                    if (off.top > docSize.height) {
                        off.top = -birdSize.height;
                    }
                    break;
    
            }
            bird.offset(off);//设置小鸟新的方位值
        });
    });
  • 相关阅读:
    spark的环境安装
    (7)zabbix资产清单inventory管理
    (6)zabbix主机与组配置
    (5)zabbix配置详解
    (4)zabbix监控第一台服务器
    (3)zabbix用户管理
    (2)zabbix硬件需求
    (1) zabbix进程构成
    centos7系统root无法通过su切换到某个普通用户
    01基础复习
  • 原文地址:https://www.cnblogs.com/xiaozizi/p/5946142.html
Copyright © 2011-2022 走看看