JS旋轉實現轉盤抽獎效果
本文實例為大傢分享瞭JS旋轉實現轉盤抽獎效果的具體代碼，供大傢參考，具體內容如下
閑來沒事,做瞭一個模擬轉盤抽獎的HTML&JS的效果:
可以在設置的時候,選擇幾個區域,並且可以填寫指針將要停止的區域
比如,我選擇瞭"區域2",結果就是這樣
具體可以見下面的源碼:(註意,這裡JQ文檔沒有貼出來,需要自行引入)
HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#RotationDiv {
/*初始化界面,讓指針朝上*/
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
width: 60px;
height: 85px;
/*邊框是用來看旋轉的地方的*/
/*border: 1px solid black;*/
}
</style>
<!--引入jq1.8-->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<!--引入旋轉的js-->
<script src="js/rotation-index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function rotationDiv(num) {
RotationIndex("RotationDiv", 8, num, 4, 5)
}
</script>
</head>
<body>
<div style="height: 85px;">
<table align="center">
<tr>
<td><input type="button" value="選擇區域:1" οnclick="rotationDiv(1)" />
<input type="button" value="選擇區域:2" οnclick="rotationDiv(2)" />
<input type="button" value="選擇區域:3" οnclick="rotationDiv(3)" />
<input type="button" value="選擇區域:4" οnclick="rotationDiv(4)" />
<input type="button" value="選擇區域:5" οnclick="rotationDiv(5)" />
<input type="button" value="選擇區域:6" οnclick="rotationDiv(6)" />
<input type="button" value="選擇區域:7" οnclick="rotationDiv(7)" />
<input type="button" value="選擇區域:8" οnclick="rotationDiv(8)" /></td>
</tr>
</table>
</div>
<table align="center" style="background-image: url(img/revolveBgImage.png); width: 500px;height: 500px;">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td style="width: 220px;">
</td>
<td>
<div id="RotationDiv"><img src="img/timg.png" width="100%" /></div>
</td>
<td style="width: 220px;"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
自己寫的旋轉的JS文件:
/**
* @param {Object} indexID 想要旋轉的控件的id
* @param {Object} areaNum 區域的塊數
* @param {Object} wantToStop 想要停止的位置(塊號)
* @param {Object} defaultTime 剛開始勻速旋轉的時間
* @param {Object} chageTime 最後減速旋轉的時間
*/
function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) {
var stopAreaNum = 0; //停在區域的名字數
var areaArr = new Array(areaNum);
var angle = 1; //每次旋轉角度
// var randomTime = Math.random() * 1500; //隨機時間
var nowTime = 0; //當前時間,隨機起點,讓停止來的更加真實
var disTime = 15; //時間差值,每15毫秒改變一次,基本上類似於60Hz刷新頻率
var disangle = 13; //角度差值
var angle360 = 0; //用於記錄角度數,360°范圍的
var UP = (1 - ((12 / chageTime) * defaultTime)); //定義一個函數uniformizing parameter
var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定義一個反比例函數的參數Inverse proportional function parameters
var myIntervalInRotationIndex = window.setInterval(function() {
nowTime += disTime;
//當時間小於默認時間時候
if((nowTime / 1000) <= defaultTime) {
//勻速旋轉
} else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {
//當時間大於默認時間,開始減速旋轉
disangle = UP + (IPFP / (nowTime / 1000));
/**
* 函數式為:
* UP+IPFP/t=h
* 其中t為時間,h為角度
*
*/
} else {
angle360 = angle % 360;
stopAreaNum = angle360 / (360 / areaNum);
if(stopAreaNum >= (wantToStop - 1.5)) {
disangle = 0.3;
} else if(stopAreaNum >= (wantToStop - 1)) {
disangle = 0.5;
} else {
disangle = 0.8;
}
if(stopAreaNum >= (wantToStop - 0.8) && stopAreaNum <= wantToStop) {
window.clearInterval(myIntervalInRotationIndex);
}
}
angle360 = angle % 360;
angle += disangle;
$("#" + indexID).attr("style", "transform:rotate(" + angle + "deg);-ms-transform:rotate(" + angle + "deg);-moz-transform:rotate(" + angle + "deg);-webkit-transform:rotate(" + angle + "deg);-o-transform:rotate(" + angle + "deg);")
}, disTime)
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。