标签：html 背景图片 图片 就会 rand onload clear asc code
这个是很简易的转盘，只用了html，css，js
通过css产生一个转盘上的指针，用js动态改变css中的transparent改变指针的角度。再添加一个背景图片类似于奖项的转盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dial</title> <link rel="stylesheet" type="text/css" href="dial.css"> <script type="text/javascript" src="dial.js"></script> </head> <body> <div id="sum"> <div id="content"> <div id="tri"> </div> <div id="center"><h1>抽奖</h1></div></div></div> </body> </html>
背景图片放在sum中，tri是指针上的三角形，center是指针上的圆，三角形和圆都在content中以便一起运动。
*{ margin: 0px; padding:0px; } #sum{ height: 550px; width: 700px; background-image: url(dial.jpg); position: relative; } #content{ padding: 0px; height: 140px; width: 140px; left: 289px; top: 109px; margin: 120px auto 0px; transform:rotate(0deg); position: absolute; } #center{ height: 140px; width: 140px; border-radius: 140px; background-color: #EE4F10; color: white; line-height: 140px; font-weight: bold; font-size: 30px; text-align: center; z-index: 2; position:relative; } #tri{ height: 0px; width: 0px; top: -27px; left: 26px; border-left: 45px solid transparent; border-right:45px solid transparent; border-bottom: 45px solid #EE4F10; z-index: -1; position: absolute; }
window.onload=function(){ var data=[320,260,180,620,760,380]; var content=document.getElementById("content"); var center=document.getElementById("center"); center.onclick=play; var timer=null; var count=0; var degv=0; var random=0; function play(){ count=0; random=Math.floor(Math.random()*6); clearInterval(timer); timer=setInterval(function(){ roll(); },30); } function roll(){ degv=count++; degv=degv*20; if(degv==data[random]) { clearInterval(timer);} content.style.webkitTransform="rotate("+degv+"deg)"; content.style.msTransform="rotate("+degv+"deg)"; content.style.MozTransform="rotate("+degv+"deg)"; content.style.OTransform="rotate("+degv+"deg)"; content.style.transform="rotate("+degv+"deg)"; } }
设置一个定时器不断的调用roll方法不断的加指针旋转的角度，直到等于数组中随机选中的角度就会停下来。
标签：html 背景图片 图片 就会 rand onload clear asc code
原文地址：http://www.cnblogs.com/ddhyd33/p/6114152.html
