avalon做的抽奖效果

先来一个简单的

<style>.sweepstake {color: orange;font-size: 24px;font-weight: bold;}</style><script src="http://files.cnblogs.com/rubylouvre/avalon2014123.js"></script><script>var idvar 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>

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 idvar vm = avalon.define({$id: "test",array: [{number: 9}, {number: 9}, {number: 9}, {number: 9}, {number: 9}],subtractOne: function(a) {var a = a - 1if (a < 0) {a = 9}return a},distance: 0, //0-40 每个格子都高40px, 那么top的移动距离也是40, 其初始值为0start: 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 += 5if (vm.distance > 50) {vm.distance = 0for (var i = 0, n = vm.array.length; i < n; i++) {vm.array[i].number += 1if(vm.array[i].number > 9){vm.array[i].number = 0}}}}, 20)}},stop: function() {if (id) {clearInterval(id)id = null}vm.distance = 0}})</script></head><body ms-controller="test"><div class="pachinko"><div ms-repeat="array" class="cell" ms-class="last: $last"><span class="top" ms-css-top="distance-40">{{subtractOne(el.number)}}</span><span class="middle" ms-css-top="distance">{{el.number}}</span></div></div><p><button type="button" ms-click="start">start</button><button type="button" ms-click="stop">stop</button></p></body>
</html>

startstop

简单说一下原理，表面上只有五个格子，其实为了出现更好的过渡效果，总共有10个格子。其中有五个位于另五个的上方，然后动画就是改变格子的top样式值就行了。对应avalon，就是改vm中的distance属性值，它会在定时器里面快速地递加，一直加到50就归零。而格子里面的值，在第一次点击时进行第一次洗牌，然后每当格子快跌出可视区后再递增一，当它大于10时，就变回0。这样不断变啊变，直到用户点了stop按钮就才得结果。

avalon做的抽奖效果相关推荐

年会抽奖系统3d效果html,老板让我做年会抽奖系统，我用Excel制作内定抽到自己的大奖！...
正常情况下抽奖效果如下所示,抽了两次,结果都是随机的.(因为是录屏软件1秒抓取2张图片,看起来滚动比较慢,实际滚动速度很快) 马上就要抽特等奖了,先点击内定小圈开关,再点开始抽奖,不论什么时候点击结束 ...
做ppt用的小插图_如何用PPT做随机抽奖？
每到年底,每个公司都开始筹备年会活动.年会在员工们最期待的就是抽奖环节了.除了用专门的抽奖软件之外,PPT也可以做随机抽奖. 今天就来解锁这个动画的做法. 1,先设置好图片和文本: 2,选中每一张幻灯 ...
如何用python画转盘_如何用ppt做一个抽奖转盘看完你学会了么
现在抽奖转盘是很常见的,有时候公司办活动也会有抽奖活动,如果让自己做一个抽奖转盘,应该怎么做? 操作方法 01 打开ppt,把幻灯片版式设置成空白的,然后点击插入,选择图表. 02 选择饼图,用第一种 ...
抽奖随机滚动_怎么用EXCEL做个抽奖器
马上要开年度总结大会了,老板要你搞个抽奖环节,如果大家一起喊1.2.3,停,大屏幕上的幸运名单就停止滚动,随后就出现了前三名,这样还是挺酷的! 如下图: 上面这种效果其实实现起来一点都不难!下面我们就 ...
ppt编写一个抽奖系统_自己动手用PPT做个抽奖器
龙源期刊网 http://www.qikan.com.cn 自己动手用 PPT 做个抽奖器作者:俞木发来源:<电脑爱好者> 2017 年第 21 期喜欢看电视的朋友可能都知道,某电视 ...
jquery php 抽奖,jquery-rotate.js制作红包大放送抽奖效果
简介现在抽奖效果在网页上已经非常常见了,以前多是 Flash 实现,但现在越来越多的使用 JavaScript 实现.两者各有优缺点,不能说哪个一定比哪个好.今天在百度糯米上看到一个"红包 ...
小程序抽奖效果demo滚筒抽奖3d动画抽奖(附代码以及随机中奖处理)
前言: 最近公司要求做一个抽奖的页面,然后看到设计稿的一刻眉头一皱,这事没那么简单最开始是用translateY但是效果太生硬了而且不方便二次抽奖或者多次抽奖找了半天决定用3d来做成一个滚轮这样的好 ...
Vue3实现九宫格抽奖效果
前言好久没有写文章了,上一次发文还是年终总结,眨眼间又是一年,每每想多总结却是坚持不来,难顶. 这次分享一个九宫格抽奖小游戏,缘起是最近公司内部做积分抽奖需求,抽出其中抽奖动效做一个总结,从零实现 ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
rmse多少算效果好_关键词SEO优化带来流量有多少？如何做SEO优化效果好？
随着行业之间的竞争激烈,企业为了获得更多的利润空间,都是以用户的使用体验为前提,争取能获得更多的收益.然而,网站优化的目的就是能满足用户的搜索习惯,让用户能通过关键词找到自己心仪的产品,让企业获得更多 ...

avalon做的抽奖效果

avalon做的抽奖效果相关推荐

最新文章

热门文章