閑來沒事,做了一個模擬轉盤抽獎的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" onclick="rotationDiv(1)" /> <input type="button" value="選擇區域:2" onclick="rotationDiv(2)" /> <input type="button" value="選擇區域:3" onclick="rotationDiv(3)" /> <input type="button" value="選擇區域:4" onclick="rotationDiv(4)" /> <input type="button" value="選擇區域:5" onclick="rotationDiv(5)" /> <input type="button" value="選擇區域:6" onclick="rotationDiv(6)" /> <input type="button" value="選擇區域:7" onclick="rotationDiv(7)" /> <input type="button" value="選擇區域:8" onclick="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) }
轉盤背景用的是500px*500px的,指針的地方需要注意的是,div框的大小應當是需要旋轉的中心部位,而不能用div把指針全部包入.
