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

最新推荐文章于 2020-01-15 17:42:45 发布

weixin_34015860

最新推荐文章于 2020-01-15 17:42:45 发布

阅读量249

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/Kummy/p/3788912.html

版权

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

查看 “淘宝彩票” 的网页源码发现，主要是用到了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>

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