摘要:最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码
最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下
html代码
- 20云豆
- 50云豆
- 100云豆
- 抽 奖
- 1000云豆
- 2000云豆
- 5000云豆
- 10000云豆
- 20000云豆
css代码
.lottery .lottery-ul{position:relative;width:360px;height:360px;margin:0;padding:0;float:left;background:#ffeabc;}
.lottery .lottery-ul li {width:120px;height:120px;line-height:90px;color:#ff5152;;text-align:center;list-style-type: none;}
.lottery .lottery-ul li .beans{color:#ff5152;;font-size:20px;font-weight:bold;}
.lottery .lottery-ul li.lottery-unit-1{position:absolute;top:0;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-2{position:absolute;top:0;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-3{position:absolute;top:0;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-4{position:absolute;top:120px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-5{position:absolute;top:240px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-6{position:absolute;top:240px;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-7{position:absolute;top:240px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-8{position:absolute;top:120px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.active{
background:url("http://www.sinacloud.com/static/special/image/lottery_bg_active.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-btn{position:absolute;top:120px;left:120px;width:120px;height:120px;background:#ffeabc;}
.lottery .lottery-ul li.lottery-btn a{display:inline-block;width:120px;height:120px;line-height:120px;text-align:center;font-size:30px;color:#fff;text-decoration:none;background:#fe8145;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.lottery .lottery-ul li.has-lottery a{padding:0;border:none;}
.hide{display:none;}
js代码
- $(function(){
- //抽奖
- var lottery={
- index:0, //当前转动到哪个位置,起点位置
- count:0, //总共有多少个位置
- timer:0, //setTimeout的ID,用clearTimeout清除
- speed:20, //初始转动速度
- times:0, //转动次数
- cycle:50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
- prize:-1,
- end:5, //中奖位置
- init:function(id){
- if ($("."+id).find(".lottery-unit").length>0) {
- $lottery = $("."+id);
- $units = $lottery.find(".lottery-unit");
- this.obj = $lottery;
- this.count = $units.length;
- console.log($units.length);
- $lottery.find(".lottery-unit-"+this.index).addClass("active");
- };
- },
- roll:function(num){
- var index = this.index;
- var count = this.count;
- var lottery = this.obj;
- console.log(count);
- $(lottery).find(".lottery-unit-"+index).removeClass("active");
- index += 1;
- if (index>count) {
- index = 1;
- };
- $(lottery).find(".lottery-unit-"+index).addClass("active");
- this.index=index;
- return false;
- },
- stop:function(index){
- this.prize=index;
- return false;
- }
- };
- function roll(){
- lottery.times += 1;
- lottery.roll();
- //确定抽奖,重置参数
- if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
- clearTimeout(lottery.timer); //大于基本转动次数+10,并转动到获奖位置,停止转动
- lottery.prize=-1;
- lottery.times=0;
- click=false;
- }else{
- if (lottery.times
- lottery.speed -= 10; //小于基本转动次数 转动加速
- }else if(lottery.times==lottery.cycle) {
- var index = lottery.end;
- lottery.prize = index; //确定中奖位置
- }else{
- lottery.speed += 20; //大于基本转动次数 转动减速
- }
- if (lottery.speed<40) {
- lottery.speed=40;
- };
- lottery.timer = setTimeout(roll,lottery.speed);
- }
- return false;
- }
- var click=false;
- window.onload=function(){
- lottery.init("lottery");
- $(".lottery-btn a.lottery-start").click(function(e){
- var target = $(e.target);
- if (click) {
- return false;
- }else{
- //此处应该是ajax请求,由于跨域,暂省略
- lottery.speed=100;
- lottery.end = 5;
- roll();
- click=true;
- target.parents(".lottery-btn").addClass("hide");
- $(".has-lottery").removeClass("hide");
- return false;
- }
- });
- };
- });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115133.html
摘要:最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码 最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下showImg(https://segmentfault.com/img/bVtGTX); html代码 20云豆 50云豆 100云豆 ...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
阅读 3057·2021-11-16 11:42
阅读 3767·2021-09-08 09:36
阅读 985·2019-08-30 12:52
阅读 2527·2019-08-29 14:12
阅读 816·2019-08-29 13:53
阅读 3663·2019-08-29 12:16
阅读 679·2019-08-29 12:12
阅读 2506·2019-08-29 11:16
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要