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 回答