首頁 > 開發者 > JavaScript
執行個體之輪盤抽獎，輪盤抽獎
現在學習到了過渡效果了，已經開始有做動畫效果的意識了，會實現一些比較炫的小玩意，
一個網頁加入過渡動畫效果，會讓人看起來很有美觀，不僵硬，有看頭，動畫是一個網頁
美觀的主要體現之一，下面做個使用個過渡效果實現的抽獎例子。
先來：
這個的實現需要使用到一些js代碼。
所需圖片：
這張圖是pointer.png的位置的。
turntable-bg.jpg這張是背景圖，在背景位置。
這張是turntable.png位置的。
需要這三張圖片，如果要實現一下，直接另存這三圖片引入進去即可。如果不會請修改成對應的圖片名字，放到同一個檔案下。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽獎</title> <!-- 這裡是css部分 --> <style> #bg{ width: 650px; height: 600px; margin: 0 auto; background: url(turntable-bg.jpg) no-repeat; position: relative; } img[src^="pointer"]{ position: absolute; z-index: 10; top: 155px; left: 247px; } img[src^="turntable"]{ position: absolute; z-index: 5; top: 60px; left: 116px; transition: all 4s; } </style></head><body><!-- 這裡是HTML結構部分 --> <div id="bg"> <img src="pointer.png" alt="pointer"> <img src="turntable.png" alt="turntable"> </div> <!-- 這裡是js部分 --> <script> var oPointer=document.getElementsByTagName("img")[0]; var oTurntable=document.getElementsByTagName("img")[1]; var cat=51.4; var num=0; var offOn=true; document.title=""; oPointer.onclick=function(){ if(offOn){ oTurntable.style.transform="rotate(0deg)"; offOn=!offOn; ratating(); } } function ratating(){ var timer=null; var rdm=0; clearInterval(timer); timer=setInterval(function(){ if(Math.floor(rdm/360)<3){ rdm=Math.floor(Math.random()*3600); }else{ oTurntable.style.transform="rotate("+rdm+"deg)"; clearInterval(timer); setTimeout(function(){ offOn=!offOn; num=rdm%360; if(num<=cat*1){ alert("4999元"); }else if(num<=cat*2){ alert("條50元"); }else if(num<=cat*3){ alert("10元"); }else if(num<=cat*4){ alert("5元"); }else if(num<=cat*5){ alert("免息服務"); }else if(num<=cat*6){ alert("提交白金"); }else if(num<=cat*7){ alert("未中獎"); } },4000); } },30); } </script></body></html>
css和HTML代碼不多，主要是為了實現過渡設定，還有為了實現層疊而使用position定位，讓元素脫離文檔流，js代碼在於擷取元素和
事件的點擊，點擊指標會旋轉，所以要給指標加個點擊事件，然後是判斷旋轉是否停止，如果沒有就點擊也不能調用函數ratating()，這個
函數執行轉盤的旋轉和判斷指標停在什麼位置，然後彈出相應的內容，而函數裡實現旋轉的過程，是擷取轉盤的元素，然後使用js控制css
的屬性-transform：rotate()，我們不是使用過這個屬性在css裡直接使它實現旋轉的效果嗎？就是和偽類別選取器:hover及過渡屬性一起使
用去實現的，那麼因為css實現不了數位運算和滑鼠點擊，所以讓js去實現且控制css屬性，實現到點擊旋轉這個功能，然而定時器的使用
暫時不說，思路就是使用js實現數位運算和滑鼠的點擊及css屬性的控制達到旋轉的效果。
Math.random()是隨機數的產生，Math.floor()向下取整。
再來個今天某人說過的例子：
純css下拉式功能表：
這個的實現很簡單，主要是:hover和過渡屬性transition的使用。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size: 16px; font-family: "微軟雅黑"; } #container{ width: 100px; margin: 0 auto; text-align: center; position: relative; } #container ul{ list-style: none; } #container span{ display: inline-block; width: 100px; height: 30px; line-height: 30px; cursor: pointer; } #container ul{ height: 0; width: 100px; overflow: hidden; transition: all 1s; position: absolute; top: 30px; left: 0px; } #container:hover ul{ height: 330px; } #container ul li{ background: #eee; margin-top: 3px; cursor: pointer; height: 30px; line-height: 30px; } </style></head><body> <div id="container"> <span>移動</span> <ul> <li>這裡有1</li> <li>這裡有2</li> <li>這裡有3</li> <li>這裡有4</li> <li>這裡有5</li> <li>這裡有6</li> <li>這裡有7</li> <li>這裡有8</li> <li>這裡有9</li> <li>這裡有10</li> </ul> </div></body></html>
因為ul是個伸縮對象，所以要讓它脫離文檔流，不是在實用時會影響到布局，給它一個絕對位置即可。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
