帶CSS和JavaScript的旋轉盒

好吧，我有一個盒子，我在CSS中做的，我希望它做的事情基本上是旋轉的。然而，我迷失的部分是，我如何控制使用範圍/滑塊旋轉的速度？帶CSS和JavaScript的旋轉盒

這是我的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);

我不能讓這個框旋。我不知道什麼是錯，但請幫助！

來源

2012-05-01 shade917

據我所知，它適用於jsfiddler但是當我去我的網站[點擊這裏]（http://web.njit.edu/~dkd9/A4/index.html） – shade917

你包括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-01 05:52:52 noob

真棒它的工作！ – shade917

我把你的代碼直接粘貼到jsfiddle.net的鏈接http://jsfiddle.net/86D7Z/，它工作得很好。我似乎無法找到你的問題。

編輯：我不相信我錯過了Micha發現的東西。該睡了。

來源

2012-05-01 05:43:25 illourr

如果我去我的網站，它根本不旋轉......我根本不理解它...... – shade917

那裏要麼有一些其他的代碼干擾它。也許你應該發佈周圍的代碼，嘗試重寫或評論它。 – illourr

我發佈的是我輸入的所有代碼。沒有別的東西在使用。多數民衆贊成在最真的困擾我的部分... – shade917

帶CSS和JavaScript的旋轉盒

回答

相關問題