成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

抽獎(jiǎng)跑馬燈

hedzr / 961人閱讀

摘要：最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下代碼云豆云豆云豆抽獎(jiǎng)已抽獎(jiǎng)云豆云豆云豆云豆云豆代碼

最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115133.html

相關(guān)文章

  • 抽獎(jiǎng)跑馬燈

    摘要：最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下代碼云豆云豆云豆抽獎(jiǎng)已抽獎(jiǎng)云豆云豆云豆云豆云豆代碼 最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下showImg(https://segmentfault.com/img/bVtGTX); html代碼 20云豆 50云豆 100云豆 ...

    Sleepy 評(píng)論0 收藏0

  • 抽獎(jiǎng)跑馬燈

    摘要：最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下代碼云豆云豆云豆抽獎(jiǎng)已抽獎(jiǎng)云豆云豆云豆云豆云豆代碼 最近做了一個(gè)春節(jié)活動(dòng)，里面有個(gè)抽獎(jiǎng)活動(dòng)，做一個(gè)跑馬燈效果，示例如下showImg(https://segmentfault.com/img/bVtGTX); html代碼 20云豆 50云豆 100云豆 ...

    ernest.wang 評(píng)論0 收藏0

  • JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

    摘要：最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。這里主要是來(lái)寫(xiě)寫(xiě)自己的優(yōu)化過(guò)程。所以寫(xiě)代碼的時(shí)候一定要注意一些小細(xì)節(jié)哈。。。在以后，其返回的元素順序等同于在中出現(xiàn)的先后順序。盡管是一個(gè)數(shù)組。這時(shí)從加入執(zhí)行隊(duì)列到加入執(zhí)行隊(duì)列中間時(shí)間間隔是。 最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。上篇文章已經(jīng)分享過(guò)html和css 的相關(guān)知識(shí)。這篇文章主要分享一些 JavaScript 相關(guān)的知識(shí)。這幾天在...

    isaced 評(píng)論0 收藏0

  • JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

    摘要：最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。這里主要是來(lái)寫(xiě)寫(xiě)自己的優(yōu)化過(guò)程。所以寫(xiě)代碼的時(shí)候一定要注意一些小細(xì)節(jié)哈。。。在以后，其返回的元素順序等同于在中出現(xiàn)的先后順序。盡管是一個(gè)數(shù)組。這時(shí)從加入執(zhí)行隊(duì)列到加入執(zhí)行隊(duì)列中間時(shí)間間隔是。 最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。上篇文章已經(jīng)分享過(guò)html和css 的相關(guān)知識(shí)。這篇文章主要分享一些 JavaScript 相關(guān)的知識(shí)。這幾天在...

    MRZYD 評(píng)論0 收藏0

  • JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

    摘要：最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。這里主要是來(lái)寫(xiě)寫(xiě)自己的優(yōu)化過(guò)程。所以寫(xiě)代碼的時(shí)候一定要注意一些小細(xì)節(jié)哈。。。在以后，其返回的元素順序等同于在中出現(xiàn)的先后順序。盡管是一個(gè)數(shù)組。這時(shí)從加入執(zhí)行隊(duì)列到加入執(zhí)行隊(duì)列中間時(shí)間間隔是。 最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。上篇文章已經(jīng)分享過(guò)html和css 的相關(guān)知識(shí)。這篇文章主要分享一些 JavaScript 相關(guān)的知識(shí)。這幾天在...

    HelKyle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hedzr

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<