摘要:最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下代码云豆云豆云豆抽奖已抽奖云豆云豆云豆云豆云豆代码
最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下
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云豆 ...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...
阅读 3938·2023-04-26 01:48
阅读 3215·2021-10-13 09:40
阅读 1676·2021-09-26 09:55
阅读 3550·2021-08-12 13:23
阅读 1646·2021-07-25 21:37
阅读 3368·2019-08-30 15:53
阅读 1316·2019-08-29 14:16
阅读 1335·2019-08-29 12:59