模仿 "淘宝彩票" 的随机选球投注效果！

谁借莪１个温暖的怀抱￠ 2022-01-05 14:43 201阅读 0赞

我个人比较喜欢看网页的效果，前几天看了淘宝的“淘宝彩票”，今天仿造做了一个，我觉得比淘宝的体验要好。

查看 “淘宝彩票” 的网页源码发现，主要是用到了Css3 transform 的 Matrix 来控制小球旋转 。

参考了张鑫旭的Css3 transform 的 Matrix 文章：[http://www.zhangxinxu.com/wordpress/?p=2427][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_www.imengwang.net_lottery_index.html]

![142314486863367.jpg][]

淘宝效果图： **淘宝彩票地址：**[http://caipiao.taobao.com/lottery/index.htm?spm=a2126.7329485.a3132.1.ELSS3I][http_caipiao.taobao.com_lottery_index.htm_spm_a2126.7329485.a3132.1.ELSS3I]

![142315056708821.jpg][]

源代码代码如下：

<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>

转载于:https://www.cnblogs.com/Kummy/p/3788912.html

[http_www.zhangxinxu.com_wordpress_p_2427]: http://www.zhangxinxu.com/wordpress/?p=2427
[http_www.imengwang.net_lottery_index.html]: http://www.imengwang.net/lottery/index.html
[142314486863367.jpg]: /images/20211228/4ecf443bc7b84daeb369566a4fbbb8d7.png
[http_caipiao.taobao.com_lottery_index.htm_spm_a2126.7329485.a3132.1.ELSS3I]: http://caipiao.taobao.com/lottery/index.htm?spm=a2126.7329485.a3132.1.ELSS3I
[142315056708821.jpg]: /images/20211228/ef0b93440779445985bacc653065a403.png