资讯专栏INFORMATION COLUMN

抽奖跑马灯

Sleepy / 2512人阅读

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

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

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



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

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

相关文章

  • 抽奖马灯

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

    hedzr 评论0 收藏0
  • 抽奖马灯

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

    ernest.wang 评论0 收藏0
  • JavaScript “马灯抽奖活动代码解析与优化(一)

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

    isaced 评论0 收藏0
  • JavaScript “马灯抽奖活动代码解析与优化(一)

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

    MRZYD 评论0 收藏0
  • JavaScript “马灯抽奖活动代码解析与优化(一)

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

    HelKyle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<