【網絡公開課總結】會飛的小鳥，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 = { width: bird.width(), height: bird.height() };//獲取到小鳥的大小
    var docSize = { width: $(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);//設置小鳥新的方位值
    });
});