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

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

　　

模仿 "淘宝彩票" 的随机选球投注效果！的更多相关文章

  1. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  2. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  3. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  4. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  5. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

  6. js运动 模仿淘宝幻灯

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JQuery模仿淘宝天猫魔盒抢购页面倒计时效果

    1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒.2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还 ...

  8. 【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose

    jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html GitHub地址:https://github.com/wangxin ...

  9. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

随机推荐

  1. PHP 中的BOM BUG

    对于PHP,一个小小让我不敢置信的事情很多,包括引用变量哪么迟钝,普通变量哪么牛B我己经很意外,甚至现在竟然出现了BOM头的BUG. 在PHP中,会引用很多小文件,include或require,哪么 ...

  2. VMware ESXi虚拟机克隆及迁移

    使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,都是linux操作系统,难道必须一个一个安装吗? VMware ESXi.VMware vCenter Server 和 vSphere Cli ...

  3. 【转载】C++ inline 函数

    (一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...

  4. C++ 面试题整理

    我和朋友们面到的c++试题整理 虚表 static const sizeof 可构造不可继承的类 stl Iterator失效 map vector vector的removed_if 优化 ---- ...

  5. LA 4329

    第一次敲树状数组  因为一个小错误 wa了 n 多遍  终于ac  太不容易了 /*********************************************************** ...

  6. prefix springmvc

    设置了@RequestMapping("/jsp/info.do"),也可以写成"jsp/info.act"不影响 retuen "index&quo ...

  7. POJ 1504 Adding Reversed Numbers (水题，高精度整数加法)

    题意:给两个整数,求这两个数的反向数的和的反向数,和的末尾若为0,反向后则舍去即可.即若1200,反向数为21.题目给出的数据的末尾不会出现0,但是他们的和的末尾可能会出现0. #include &l ...

  8. HDU 2473 Junk-Mail Filter(并查集+删点，设立虚父节点/找个代理)

    题意:有N封邮件, 然后又两种操作,如果是M X Y , 表示X和Y是相同的邮件.如果是S X,那么表示对X的判断是错误的,X是不属于X当前所在的那个集合,要把X分离出来,让X变成单独的一个.最后问集 ...

  9. 《架构探险——从零开始写Java Web框架》这书不错，能看懂的入门书

    这书适合我. 哈哈,结合 以前的知识点,勉强能看懂. 讲得细,还可以参照着弄出来. 希望能坚持 完成啦... 原来,JSTL就类似于DJANGO中的模板. 而servlet类中的res,req,玩了D ...

  10. django如何用orm增加manytomany关系字段（自定义表名）

    不自定义表名的,网上有现成的,但如果自定义之后,则要变通一下了. app_insert = App.objects.get(name=app_name) site_insert = Site.obje ...