現在學習到了過渡效果了，已經開始有做動畫效果的意識了，會實現一些比較炫的小玩意，一個網頁加入過渡動畫效果，會讓人看起來很有美觀，不僵硬，有看頭，動畫是一個網頁美觀的主要體現之一，下面做個使用個過渡效果實現的抽獎例子。
先來效果圖：
這個的實現需要使用到一些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()向下取整。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
