抽獎跑馬燈

hedzr 發布于2019-08-30 12:52 / 949人閱讀

摘要：最近做了一個春節活動，里面有個抽獎活動，做一個跑馬燈效果，示例如下代碼云豆云豆云豆抽獎已抽獎云豆云豆云豆云豆云豆代碼

最近做了一個春節活動，里面有個抽獎活動，做一個跑馬燈效果，示例如下

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云服務器云服務器跑馬燈跑馬燈代碼跑馬燈特效實現跑馬燈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115133.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云豆 ...

ernest.wang 2019-08-01 15:10 評論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