0

ランダムな色のドットを「雨が降っている」私のアニメーションでは、ENTER を押して色を変更できるようにしたいと考えています。キープレスの場合、次のコードを使用しています：

    $(document).keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            // change variables for the colors
        }
    });

コードに問題はないはずですが、Enter キーを押しても何も起こりません。誰かがここで私を助けてくれたら嬉しいです!

ここでコードを見つけることができます: http://jsfiddle.net/GsBcz/

4

1 に答える 1

1

アニメーション呼び出しごとにイベントをバインドする理由 また、[event.which] は、マウスとキーのイベントを検出するための jQuery のクロスブラウザーの方法です。

これは役立つはずです、

フィドル

HTML:

<html>
<head>
        <title>Raining dots</title> 
        <link href='http://fonts.googleapis.com/css?family=Give+You+Glory' rel='stylesheet' type='text/css'> 
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="js/external.js" ></script>
</head>
        <body id="bg">
        </body>
</html>​

ジャバスクリプト:

var Capsule = {
    init: function() {

        this.c1 = 256, this.c2 = 220, this.c3 = 225;
        Capsule.callDots();
    },

    callDots: function() {

        window.setInterval(function() {
            Capsule.animateDots(Capsule.c1, Capsule.c2, Capsule.c3);
        }, 10);
    },

    animateDots: function() { 

        var theWidth = $(window).width(),
            theHeight = $(window).height(),
            randomEntry = Math.ceil(Math.random() * theWidth),
            preRandomDotSize = Math.ceil(Math.random() * 40),
            randomDotSize = preRandomDotSize + 50;

        var dotName = 'dot-' + randomEntry,
            color1 = Math.ceil(Math.random() * Capsule.c1),
            color2 = Math.ceil(Math.random() * Capsule.c2),
            color3 = Math.ceil(Math.random() * Capsule.c3),
            colors = 'rgb(' + color1 + ',' + color2 + ',' + color3 + ')';

        $('<div />', {
            text: '.',
            id: dotName,
        }).appendTo('body').addClass('theDots').css('left', randomEntry).css('font-size', randomDotSize).css('color', colors).animate({
            "top": "+=" + theHeight
        }, 5000, function() {});
    }
};
$(document).ready(function() {
    Capsule.init();
}).keypress(function(event) {
    if (event.which == '13') {
        Capsule.c1 += 2, Capsule.c2 += 4, Capsule.c3 += 6;
    }
});​

CSS:

body {
    font: 14px / 1.5em 'Gloria Hallelujah', cursive;
}

.theDots{
        position:absolute;
        top:-50px;
        left:0px;
        z-index:10;
        position:block;
}​
于 2012-06-08T14:37:42.953 に答える