實例之*抽獎
- PHP中文网原創
- 2016-08-15 16:49:512266瀏覽
現在學習到了過渡效果了，已經開始有做動畫效果的意識了，會實現一些比較炫的小玩意，
一個網頁加入過渡動畫效果，會讓人看起來很有美觀，不僵硬，有看頭，動畫是一個網頁
美觀的主要體現之一，下面做個使用個過渡效果實現的抽獎範例。
先來效果圖：
這個的實作需要使用一些js程式碼。
所需的圖片：
這張圖是pointer.png的位置。
turntable-bg.jpg这张是背景图，在背景位置。
这张是turntable.png位置的。
需要這三張圖片，如果要實現一下，直接另存這三圖片引入進去即可。如果不會請修改成對應的圖片名字，放到同一個檔案下。
程式碼：
<!DOCTYPE html>
<html>
<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碼在於取得元素和
事件的點擊，點擊指針會旋轉，所以要給指針加個點擊事件，然後是判斷旋轉是否停止，如果沒有就點擊也不能調用函數ratating()，這個
函數執行轉盤的旋轉和判斷指針停在什麼位置，然後彈出對應的內容，而函數裡實現旋轉的過程，是獲取轉盤的元素，然後使用js控制css
的屬性-transform：rotate()，我們不是使用過這個屬性在css裡直接使它實現旋轉的效果嗎？就是和偽類選擇器:hover及過渡屬性一起使
用去實現的，那麼因為css實現不了數字的運算和滑鼠點擊，所以讓js去實現且控制css屬性，實現到點擊旋轉這個功能，然而定時器的使用
暫時不說，想法就是使用js實現數字的運算和滑鼠的點擊及css屬性的控制達到旋轉的效果。
Math.random()是隨機數的生成，Math.floor()向下取整。
再來個今天某人說過的例子：
純css下拉選單：
效果圖
這個的實現很簡單，主要是hover
transition的使用。 程式碼：<!DOCTYPE html>
<html>
<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是個伸縮對象，所以要讓它脫離文檔流，不是在實用時會影響到佈局，給它一個絕對定位即可。 以上就是實例之輪盤抽獎的內容，更多相關內容請關注PHP中文網（www.php.cn）！ 陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS(四)：背景+變形下一篇：CSS(四)：背景+變形