avalon做的抽奖效果
.sweepstake {
color: orange;
font-size: 24px;
font-weight: bold;
}
先来一个简单的
<style>
.sweepstake {
color: orange;
font-size: 24px;
font-weight: bold;
}
</style>
<script src="http://files.cnblogs.com/rubylouvre/avalon2014123.js">
</script>
<script>
var id
var vm = avalon.define({
$id: "test",
number: 100,
click: function() {
if (!id) {
id = setInterval(function() {
vm.number--
if (vm.number === 0) {
clearInterval(id)
id = null
}
}, 100)
}
}
})
</script>
<div ms-controller="test">
<p class="sweepstake">{{number}}
</p>
<p><button type="button" ms-click="click">xxx</button></p>
</div>
var id
var vm = avalon.define({
$id: "test",
number: 100,
click: function() {
if (!id) {
id = setInterval(function() {
vm.number--
if (vm.number === 0) {
clearInterval(id)
id = null
}
}, 100)
}
}
})
{{number}}
xxx
再来一个复杂的有动画效果的柏青哥
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<style>
.pachinko{
height: 40px;
width: 245px;
border: 5px solid black;
padding: 15px;
}
.pachinko .cell{
margin-right: 20px;
position: relative;
float: left;
border: 1px solid blueviolet;
width: 30px;
height: 40px;
overflow:hidden
}
.pachinko .cell.last{
margin-right: 0px;
}
.pachinko .cell .top{
position: absolute;
display: block;
top: 0px;
left: 0px;
text-align: center;
line-height: 40px;
width: 30px;
height: 40px;
}
.pachinko .cell .middle{
position: absolute;
display: block;
top: -40px;
left: 0px;
text-align: center;
line-height: 40px;
width: 30px;
height: 40px;
}
</style>
<script>var id
var vm = avalon.define({
$id: "test",
array: [{number: 9}, {number: 9}, {number: 9}, {number: 9}, {number: 9}],
subtractOne: function(a) {
var a = a - 1
if (a < 0) {
a = 9
}
return a
},
distance: 0, //0-40 每个格子都高40px, 那么top的移动距离也是40, 其初始值为0
start: function() {
for (var i = 0, n = vm.array.length; i < n; i++) {
vm.array[i].number = Math.floor(Math.random() * 10)
}
if (!id) {
id = setInterval(function() {
vm.distance += 5
if (vm.distance > 50) {
vm.distance = 0
for (var i = 0, n = vm.array.length; i.pachinko{
height: 40px;
width: 245px;
border: 5px solid black;
padding: 15px;
}
.pachinko .cell{
margin-right: 20px;
position: relative;
float: left;
border: 1px solid blueviolet;
width: 30px;
height: 40px;
overflow:hidden
}
.pachinko .cell.last{
margin-right: 0px;
}
.pachinko .cell .top{
position: absolute;
display: block;
top: 0px;
left: 0px;
text-align: center;
line-height: 40px;
width: 30px;
height: 40px;
}
.pachinko .cell .middle{
position: absolute;
display: block;
top: -40px;
left: 0px;
text-align: center;
line-height: 40px;
width: 30px;
height: 40px;
}var id
var vm = avalon.define({
$id: "test2",
array: [{number: 9}, {number: 9}, {number: 9}, {number: 9}, {number: 9}],
subtractOne: function(a) {
var a = a - 1
if (a 50) {
vm.distance = 0
for (var i = 0, n = vm.array.length; i 9){
vm.array[i].number = 0
}
}
}
}, 20)
}},
stop: function() {
if (id) {
clearInterval(id)
id = null
}
vm.distance = 0
}
}){{subtractOne(el.number)}}
{{el.number}}startstop
简单说一下原理，表面上只有五个格子，其实为了出现更好的过渡效果，总共有10个格子。其中有五个位于另五个的上方，然后动画就是改变格子的top样式值就行了。对应avalon，就是改vm中的distance属性值， 它会在定时器里面快速地递加，一直加到50就归零。而格子里面的值，在第一次点击时进行第一次洗牌，然后每当格子快跌出可视区后再递增一，当它大于10时，就变回0。这样不断变啊变，直到用户点了stop按钮就才得结果。
avalon做的抽奖效果的更多相关文章
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3做动物走路效果
CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...
- 2021年都要过去啦，你还在用Excel做数据可视化效果吗？
2021年都要过去啦,你还在用Excel做数据可视化效果吗?古语有云,"工欲善其事,必先利其器",没有专业的工具,前期准备的再好也是白搭.现在运用数据可视化工具于经营活动中的企业是 ...
- css做旋转相册效果
css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...
- 利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...
- Deeplink做不出效果，那是你不会玩！
最近魔Sir听一些有些同学说之前用过Deeplink,但效果并没有想象中的那么好,在了解了小伙伴的使用场景后,魔Sir觉得有必要出这么篇东西告诉大家,Deeplink效果差,那是因为你不会玩! 对于已 ...
- 最近比较迷flash professional cc 做PPT，做一个flash做动态打字效果的教程
想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...
- Flash 用FLASH遮罩效果做图片切换效果
本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...
随机推荐
- MySQL: ON DUPLICATE KEY UPDATE 用法
使用该语法可在插入记录的时候先判断记录是否存在,如果不存在则插入,否则更新,很方便,无需执行两条SQL INSERT INTO osc_visit_stats(stat_date,type,id,vi ...
- 利用windows server 2012 R2的Hyper-V搭建多个虚拟机的 Dynamics CRM 环境知识点小结
一.需要掌握网络的知识,域真正的意义,防火墙等其他知识,这些知识我还需要加强,下面是我和同事的结果,不对的地方大家可以指出来,谢谢. 1.安装好的CRM2011环境,必须先打Update Rollup ...
- LAMP兄弟连 李强强 GVIM配置文件完整版
转自http://blog.sina.com.cn/s/blog_5fbb378c01016npv.html "自己看着李强强老师视频代码手写打的.之前最后的一个gvim默认函数方法没放上, ...
- 动态修改css 规则
页面引用了两个样式表: <link href="css/mui.min.css" rel="stylesheet" /> <link href ...
- SpringBoot中实现依赖注入功能
本文转载自:https://blog.csdn.net/linzhiqiang0316/article/details/52639888 今天给大家介绍一下SpringBoot中是如何实现依赖注入的功 ...
- java-appium-527进阶-1 UiAutomator1&2区别和封装
1.UiAutomator和UiAtumator2的区别: 1.1 UiAutomator1有关于id定位的策略 UiAutomator1 id定位在resourceid匹配失败时,会匹配conten ...
- 半联结&反联结！
半联结是在两个数据集(表)之间的联结,其中第一个数据集中的数据行在决定是否返回时会根据在另一个数据集中出现或不出现至少一个相匹配的数据行来确定.“不出先”匹配行——这是半联结的一种特殊形式,称为反联结 ...
- django中使用Form组件
内容: 1.Form组件介绍 2.Form组件常用字段 3.Form组件校验功能 4.Form组件内置正则校验 参考:https://www.cnblogs.com/liwenzhou/p/87478 ...
- oracle库和表空间
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Oracle数据库实例则是一组Ora ...
- python学习笔记一和PHP的一些对比
python和php一样是 解释性语言 php和php一样 定义变量不需要指定类型,C语言中的print函数 在python中也是适用的 python编码 适用缩进 4个空格,通常存储为UTF-8模 ...