抽奖跑马灯

ernest.wang 发布于2019-08-01 15:10 / 1917人阅读

摘要：最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码

最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下

html代码

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代码

云服务器 GPU云服务器跑马灯跑马灯代码跑马灯特效实现跑马灯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49806.html

抽奖跑马灯

摘要：最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下showImg(https://segmentfault.com/img/bVtGTX); html代码 20云豆 50云豆 100云豆 ...

Sleepy 2019-08-19 17:55 评论0 收藏0
抽奖跑马灯

摘要：最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码最近做了一个春节活动，里面有个抽奖活动，做一个跑马灯效果，示例如下showImg(https://segmentfault.com/img/bVtGTX); html代码 20云豆 50云豆 100云豆 ...

hedzr 2019-08-30 12:52 评论0 收藏0
JavaScript “跑马灯”抽奖活动代码解析与优化（一）

摘要：最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后，其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...

isaced 2019-08-19 17:36 评论0 收藏0
JavaScript “跑马灯”抽奖活动代码解析与优化（一）

摘要：最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后，其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...

MRZYD 2019-08-30 12:45 评论0 收藏0
JavaScript “跑马灯”抽奖活动代码解析与优化（一）

摘要：最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后，其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...

HelKyle 2019-08-01 15:04 评论0 收藏0