3

純粋な CSS または Jquery を使用してアニメーション ボタンを作成し、4 月 1 日の訪問者に冗談を言いたいと思います。基本的に、これは通常のボタンですが、ユーザーがホバーすると、マウスの反対側にすばやく移動します。シンプルなゲームです。しかし、捕まえるのはそれほど難しくないはずです。ユーザーが頑張ったらクリックするかもしれません:)

誰でもこれを作成するのを手伝ってもらえますか?

ありがとうございました！

4

2 に答える 2

5

このようなもの：

$("button").mouseover(function(){
    $(this).css({
        left:(Math.random()*300)+"px",
        top:(Math.random()*300)+"px",
    });
});

デモ: http://jsfiddle.net/ZQamp/

@roXon の提案に感謝し、より優れたアニメーションを提供します: http://jsfiddle.net/ZQamp/3

于 2013-03-29T12:36:39.863 に答える
0

完全なコードは次のとおりです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            .block
            {
                position: absolute;
                left: 50px;
                width: 130px;
                height: 30px;
                margin: 5px;
            }
        </style>
        <script src="ReferencetoYourJqueryFile" type="text/javascript"></script>
    </head>
    <body>
        <div class="block">
            <input type="button" name="btnClick" value="Catch me if you can" style="width: 130px;
                height: 30px; border: 1px sold silver; background-color: #f7dfb5" />
        </div>
        <script type="text/javascript">
            $(".block").mouseover(function () {
                $(".block").animate({ 
                        left:(Math.random()*500),
                        top:(Math.random()*500),
                 }, "fast");
            });
        </script>
    </body>
    </html>

于 2013-03-29T13:01:56.480 に答える