Question

好的，我有一个用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);

我不能让这个盒子旋转。我不知道什么是错的，但请帮忙！

Answer 1

你包含了错误的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>

Answer 2

我通过此链接http://jsfiddle.net/86D7Z/将您的代码直接粘贴到jsfiddle.net，它运行得很好。我似乎无法找到你的问题。

编辑：我简直不敢相信我错过了Micha发现的东西。睡觉的时间。

旋转框与CSS和JavaScript

2 个答案: