我个人比较喜欢看网页的效果，前几天看了淘宝的“淘宝彩票”，今天仿造做了一个，我觉得比淘宝的体验要好。
查看 “淘宝彩票” 的网页源码发现，主要是用到了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>
模仿 "淘宝彩票" 的随机选球投注效果！的更多相关文章
-
android ------ RecyclerView 模仿淘宝购物车
电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...
-
漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS ...
-
JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
-
模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
-
jQuery模仿淘宝商品评价
最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...
-
js运动 模仿淘宝幻灯
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
-
JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒.2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还 ...
-
【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose
jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html GitHub地址:https://github.com/wangxin ...
-
jquery模仿淘宝星星打分
今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...
随机推荐
-
记一次ss故障
本文主要参考: https://github.com/*/* shadowssocks 分为客户端和服务器端. 我们平时买的服务,使用是要用的是客户端. 如果你 ...
-
java多线程-锁
自 Java 5 开始,java.util.concurrent.locks 包中包含了一些锁的实现,因此你不用去实现自己的锁了.但是你仍然需要去了解怎样使用这些锁. 一个简单的锁 让我们从 java ...
-
Eclipse 报java.lang.OutOfMemoryError: PermGen space错
这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被放到PermGen space中,它和存放类实例(Instance)的Heap区域不同,GC(Garbage C ...
-
Getting Real 开发宝典
此书是管理者.程序员或设计师必学的宝典.它以更小的规模,更快的速度,更高的质量来完成软件开发,使产品更简单.粗暴(精致). 近百条精炼总结,不要奢望一次全部记住或理解,只要能理解或做到 ...
-
paper 92：图像视觉博客资源2之MIT斯坦福CMU
收录的图像视觉(也包含机器学习等)领域的博客资源的第二部分,包含:美国MIT.斯坦福.CMU三所高校 1)这些名人大家一般都熟悉,本文仅收录了包含较多资料的个人博客,并且有不少更新,还有些名人由于分享 ...
-
[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...
-
poj 3259Wormholes (spfa最短路径)
#include<stdio.h> #include<string.h> #include<limits.h> #include<queue> usin ...
-
swift之属性
知识点总结: 1.存储属性 struct Town{ let region = "South" //只读属性 var population = //读写属性 } 2.惰性存储属性 ...
-
Node学习笔记：建立TCP服务器和客户端之间的通信
结构: socket是应用层和传输层的桥梁.(传输层之上的协议所涉及的数据都是在本机处理的,并没进入网络中) 涉及数据: socket所涉及的数据是报文,是明文. 作用: 建立长久链接,供网络上的两个 ...
-
29-jsp中用js进行时间格式转化
CST可以为如下4个不同的时区的缩写: 美国中部时间:Central Standard Time (USA) UT-6:00 澳大利亚中部时间:Central Standard Time (Austr ...