0

さて、私は CSS で作成したボックスを持っています。私がやりたいことは、基本的にスピンです。しかし、私が迷子になっているのは、範囲/スライダーを使用してボックスが回転する速度を制御するにはどうすればよいですか?

これは私のHTMLコードです:

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="box.css" />
<link rel="javascript" href="spin.js" />
</head>


<body>
    <div id="box">
        <p id="text">Something goes here...</p>
    </div>
    <div id="control">
        <input id="controlo" type="range" min="10" max="50" step="5" value="25" />
    </div>
</body>
</html>

これは私のCSSコードです:

body{
    text-align:center;
}

#box{
    display:block;
    width:150px;
    margin:150px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:red;
    -webkit-transition: -webkit-transform 1.5s linear;
}

.eg {
 -webkit-transform: rotate(360deg);   
}

そして最後に JavaScript コード:

var cur = 0;

function doit() {
    var speed = +$("#controlo").val();
    cur = (cur + speed);
    $("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}

setInterval(doit, 100);

この箱を回転させることはできません。何が悪いのかわかりませんが助けてください！

4

2 に答える 2

3

JavaScript が間違って含まれています。

次のように含める必要があります。

<script type="text/javascript" src="spin.js"></script>

このようではありません：

<link rel="javascript" href="spin.js" />

また、以前に jQuery を含めたことを確認する必要があります。だから先頭に

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-05-01T05:52:52.873 に答える
0

このリンクhttp://jsfiddle.net/86D7Z/のjsfiddle.net にコードを直接貼り付けたところ、問題なく動作しました。問題が見つからないようです。

編集: Micha が見つけたものを見逃したなんて信じられません。寝る時間。

于 2012-05-01T05:43:25.907 に答える