我个人比较喜欢看网页的效果，前几天看了淘宝的“淘宝彩票”，今天仿造做了一个，我觉得比淘宝的体验要好。
查看 “淘宝彩票” 的网页源码发现，主要是用到了Css3 transform 的 Matrix 来控制小球旋转 。
参考了张鑫旭的Css3 transform 的 Matrix 文章：http://www.zhangxinxu.com/wordpress/?p=2427
我发现该效果主要用到了CSS3以及队列的知识：
[1]: 旋转效果：transform: matrix(1, 0, 0, 1, 0, 0); (这里还可以用rotate来实现旋转)
[2]: 队列: 用setTimeout来模拟队列
自制效果如图：演示Demo地址如下：http://www.imengwang.net/lottery/index.html#
淘宝效果图： 淘宝彩票地址：http://caipiao.taobao.com/lottery/index.htm?spm=a2126.7329485.a3132.1.ELSS3I
源代码代码如下：
<html>
<head><title>彩票投注</title><meta charset="gb2312"/><style type="text/css">html, body {background-color: #FFFFFF;font: 12px/1.5 tahoma,arial,simsun,sans-serif;overflow-x: hidden;}.num-bet {-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-color: #CCCCCC #E5E5E5 #CCCCCC #CCCCCC;border-image: none;border-style: solid;border-width: 1px;float: left;height: 79px;overflow: hidden;padding: 15px 20px;position: relative;width: 523px;
}ul {background-image: url("T1czW3XpheXXc7wEUY-98-4261.png");background-repeat: no-repeat;float: left;height: 70px;left: 0;padding-left: 70px;position: absolute;top: 0;width: 350px;}.num-bet-ssq {background-position: -28px 12px;}.num-bet-section li {color: #FFFFFF;cursor: pointer;display: inline-block;float: left;font-size: 23px;height: 42px;line-height: 42px;margin: 20px 8px 12px 0;position: relative;text-align: center;width: 42px;}.num-bet-red {background: url("T1..hRFktfXXbzQiDx-393-1689.png") no-repeat scroll 1px -249px rgba(0, 0, 0, 0);}.num-bet-blue {background: url("T1..hRFktfXXbzQiDx-393-1689.png") no-repeat scroll -84px -249px rgba(0, 0, 0, 0);}.num-bet-action {display: inline-block;float: right;margin: 15px 0 6px;}.num-bet-action a {background-image: url("T1..hRFktfXXbzQiDx-393-1689.png");background-repeat: no-repeat;border-width: 0;cursor: pointer;display: inline-block;float: left;height: 46px;}.num-bet-random {background-position: 0 -60px;width: 66px;}.num-bet-random:hover {background-position: 0 -106px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="CommonApi.js"></script><script type="text/javascript">$(function() {var css3Lottery = function(element, value, durationAnimate, roateNum) {value+=45;var cosVal = Math.cos(value%360 * Math.PI / 180), sinVal = Math.sin(value%360 * Math.PI / 180);var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)';var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;for (var i=0; i < length; i+=1) {var css="" +arrPriex[i] + "-Transform";element.css(css,""+valTransform+"");}var a;durationAnimate=durationAnimate||15;roateNum=roateNum||3;if(value<=360*roateNum){a = setTimeout(function(){css3Lottery(element,value);},durationAnimate);}else{var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;for (var i=0; i < length; i+=1) {var css="" +arrPriex[i] + "-Transform";element.css(css,"matrix(1, 0, 0, 1, 0, 0)").text(getNumber());}}} var q = $.Queue().NewQueue;$(".num-bet-random").click(function(){/*q.queue(function () {css3Lottery($("ul li"),0);}).wait(110)*/q.queue(function () {css3Lottery($("ul li").eq(0),0);}).wait(100).queue(function () {css3Lottery($("ul li").eq(1),0);}).wait(120).queue(function () {css3Lottery($("ul li").eq(2),0);}).wait(140).queue(function () {css3Lottery($("ul li").eq(3),0);}).wait(160).queue(function () {css3Lottery($("ul li").eq(4),0);}).wait(180).queue(function () {css3Lottery($("ul li").eq(5),0);}).wait(200).queue(function () {css3Lottery($("ul li").eq(6),0);}).dequeue();});var getNumber=function(){return parseInt(Math.ceil(Math.random()*30));};});</script>
</head>
<body>
<div class="num-bet"><div class="num-bet-section"><ul class="num-bet-ssq" style="left: 0px;"><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0.05px; transform: matrix(1, 0, 0, 1, 0, 0);">05</li><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0.05px; transform: matrix(1, 0, 0, 1, 0, 0);">08</li><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0px; transform: matrix(1, 0, 0, 1, 0, 0);">09</li><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0.05px; transform: matrix(1, 0, 0, 1, 0, 0);">11</li><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0.05px; transform: matrix(1, 0, 0, 1, 0, 0);">24</li><li loggsgroup="mp" editstyle="num-bet-red-editing" hoverstyle="num-bet-red-hover" class="num-bet-red monitor-gs" loggsdata="lottery.11.3.24" style="top: 0.05px; transform: matrix(1, 0, 0, 1, 0, 0);">30</li><li loggsgroup="mp" editstyle="num-bet-blue-editing" hoverstyle="num-bet-blue-hover" class="num-bet-blue monitor-gs" loggsdata="lottery.11.3.25" style="top: 0px; transform: matrix(1, 0, 0, 1, 0, 0);">15</li></ul><div class="num-bet-action"><a class="num-bet-random" hidefocus="true" loggsgroup="mp" href="#" loggsdata="lottery.11.3.22" data-spm-anchor-id="a2126.6843133.a313l.4"></a></div></div>
</div>
</body>
</html>