效果预览:
一、模拟抽奖的实现过程
旋转原理:当支持 CSS3 属性采用 transform: rotate(角度 deg)设置, 当角度为正数时顺时针旋转,当为负数时逆时针旋转。如果是 IE8 及其以下,采用采用绝对定位设置 top 和 left,模拟角度旋转。
run 方法,参数 angle 指角度
模拟转盘加速,匀速和减速。当角度小于某个数值时,让其处于加速此处采用 1.01 的系数作为加速度,当大于某个数值时处于高速匀速状态,当角度大于设置的最大数值时,让其减速采用系数为 0.99。设置负数作为减速的值(即变量 tmp),随即获取负 360 中的值(即变量 m),当大于这个值时,转盘停止。
- function run(angle) {
- if (isIE) {
- cosDeg = Math.cos(angle * Math.PI / 180);
- sinDeg = Math.sin(angle * Math.PI / 180);
- with (target.filters.item(0)) {
- M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
- }
- target.style.top = (orginH - target.offsetHeight) / 2 + "px";
- target.style.left = (orginW - target.offsetWidth) / 2 + "px";
- } else if (target.style.MozTransform !== undefined) {
- target.style.MozTransform = "rotate(" + angle + "deg)";
- } else if (target.style.OTransform !== undefined) {
- target.style.OTransform = "rotate(" + angle + "deg)";
- } else if (target.style.webkitTransform !== undefined) {
- target.style.webkitTransform = "rotate(" + angle + "deg)";
- } else {
- target.style.transform = "rotate(" + angle + "deg)";
- }
- }
启动抽奖和重新设置抽奖
- var tmp = -900;
- var m = -parseInt(Math.random() * 360);
- timer = setInterval(function () {
- if (i > 3000) {
- tmp = parseInt(tmp * 0.99);
- if (tmp > m) {
- tmp = m;
- clearInterval(timer);
- msg(m);
- }
- run(tmp);
- }
- else if (i > 1000) {
- i = i + 45;
- run(i);
- }
- else {
- i = parseInt((i + 1) * 1.01);
- run(i);
- }
- }, 50);
- <input id="test" type="button" value="抽奖" />
- <input id="restart" style="display: none;" type="button" value="再抽一次" />
- m$('test').onclick = function () {
- m$('test').style.display = "none";
- showMsg();
- }
m$('restart').onclick = function () { m$('restart').style.display ="none";
if (isIE) {m$("demo").style.top ="0px"; m$("demo").style.left ="0px";} else if (m$("demo").style.MozTransform !== undefined) {m$("demo").style.MozTransform ='rotate(0deg)'; } else if (m$("demo").style.OTransform !== undefined) {m$("demo").style.OTransform ='rotate(0deg)';
} else if (m$("demo").style.webkitTransform !== undefined) {m$("demo").style.webkitTransform ='rotate(0deg)'; } else {m$("demo").style.transform ='rotate(0deg)'; }
m$('test').style.display = "block"; i = 0; }
二、完整代码 demo:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- 抽奖
- </title>
- <style type="text/css">
- #container{width: 400px;height: 400px;position: relative;margin:
- 0 auto;} #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto
- expand");}
- </style>
- </head>
- <body style="height: 1000px;">
- <div id="container">
- <div id="demo">
- <img alt="" src="http://files.phperz.com/file_images/article/201406/20146394819279.png?20145394926"
- width="400" height="400" />
- </div>
- </div>
- <input id="test" type="button" value="抽奖" />
- <input id="restart" style="display: none;" type="button" value="再抽一次"
- />
- <div id="msg">
- </div>
- <script type="text/javascript">
- var m$ = function(id) {
- return document.getElementById(id);
- }
- var ua = navigator.userAgent;
- var isIE = /msie/i.test(ua) && !window.opera;
var i = 1, sinDeg = 0, cosDeg = 0, timer = null; var mRotate = function () { var rotate = function (target, msg) {target = m$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) {if (isIE) {cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) {M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + "px"; target.style.left = (orginW - target.offsetWidth) / 2 + "px"; } else if (target.style.MozTransform !== undefined) {target.style.MozTransform ="rotate("+ angle +"deg)";} else if (target.style.OTransform !== undefined) {target.style.OTransform ="rotate("+ angle +"deg)";} else if (target.style.webkitTransform !== undefined) {target.style.webkitTransform ="rotate("+ angle +"deg)";} else {target.style.transform ="rotate("+ angle +"deg)";} }
var tmp = -900; var m = -parseInt(Math.random() * 360); timer = setInterval(function () {if (i> 3000) {tmp = parseInt(tmp * 0.99); if (tmp> m) {tmp = m; clearInterval(timer); msg(m); } run(tmp); } else if (i> 1000) {i = i + 45; run(i); } else {i = parseInt((i + 1) * 1.01); run(i); } }, 50); } return {rotate: rotate} } ();
function showMsg() { mRotate.rotate("demo", function msg(m) {if (m> -90 && m <-30) {m$("msg").innerHTML +="22222222";} else if (m> -150 && m <-90) {m$("msg").innerHTML +="333333333";} else if (m> -210 && m <-150) {m$("msg").innerHTML +="444444";} else if (m> -270 && m <-210) {m$("msg").innerHTML +="5555555";} else if (m> -330 && m <-270) {m$("msg").innerHTML +="6666666";} else {m$("msg").innerHTML +="111111111";} m$('restart').style.display = "block"; }); }
window.onload = function () { m$('test').onclick = function () {m$('test').style.display ="none"; showMsg();}
m$('restart').onclick = function () { m$('restart').style.display ="none";
if (isIE) {m$("demo").style.top ="0px"; m$("demo").style.left ="0px";} else if (m$("demo").style.MozTransform !== undefined) {m$("demo").style.MozTransform ='rotate(0deg)'; } else if (m$("demo").style.OTransform !== undefined) {m$("demo").style.OTransform ='rotate(0deg)';
} else if (m$("demo").style.webkitTransform !== undefined) {m$("demo").style.webkitTransform ='rotate(0deg)'; } else {m$("demo").style.transform ='rotate(0deg)'; }
m$('test').style.display = "block"; i = 0; } }
来源: http://www.phperz.com/article/17/0415/275754.html