成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼

番茄西紅柿 / 1537人閱讀

摘要：需求抽獎(jiǎng)代碼最多可以抽獎(jiǎng)次，而且，每次只會(huì)中元理財(cái)金或者謝謝參與，其它的不會(huì)抽中哈哈，果然都是套路。

需求：

抽獎(jiǎng)代碼最多可以抽獎(jiǎng)5次，而且，每次只會(huì)中“2000元理財(cái)金”或者“謝謝參與”，其它的不會(huì)抽中（哈哈，果然都是套路）。

效果如下：

一、頁(yè)面結(jié)構(gòu)：

?
1 2 3 4 5 6 7 8 9 10 11 12
"g-content">   
"g-lottery-case">     
"g-left">       

您已擁有"playnum">次抽獎(jiǎng)機(jī)會(huì)，點(diǎn)擊立刻抽獎(jiǎng)！~

      
"g-lottery-box">         
"g-lottery-img">         
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開(kāi)始抽獎(jiǎng)">       
     
   

標(biāo)簽h2為提示內(nèi)容，.playnum是剩余抽獎(jiǎng)次數(shù)，.g-lottery-img是最外層的閃燈，.g-lottery-img是轉(zhuǎn)動(dòng)的內(nèi)容，.playbtn是點(diǎn)擊抽獎(jiǎng)按鈕。

這里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很簡(jiǎn)單的，沒(méi)幾個(gè)AIP。

二、簡(jiǎn)單的樣式：

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

樣式就定一下高度，居中一下，顯示一下背景圖片

三、JS代碼：

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

說(shuō)到底就是用一個(gè)1~6的隨機(jī)數(shù)，然后把對(duì)應(yīng)的角度值傳給jquery.rotate.js,它就會(huì)轉(zhuǎn)到相應(yīng)的地方，最后做一下對(duì)應(yīng)剩余次數(shù)的判斷和修改。

最后所有代碼為：

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137   "utf-8" />   抽獎(jiǎng)   "keywords" content="">   "description" content="">   "X-UA-Compatible" content="IE=edge">   "renderer" content="webkit">   
"g-content">   
"g-lottery-case">     
"g-left">       

您已擁有"playnum">次抽獎(jiǎng)機(jī)會(huì)，點(diǎn)擊立刻抽獎(jiǎng)！~

      
"g-lottery-box">         
"g-lottery-img">         
        "playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開(kāi)始抽獎(jiǎng)">       
     
   

所需要的圖片(這里好像上傳不了壓縮文件，所以不能整個(gè)打包上傳了)：

#復(fù)制下面的圖片名稱(chēng)-鼠標(biāo)移到圖片上-右鍵-圖片另存為-粘貼保存#

1.最外面的閃燈：ly-plate-c.gif

2.六個(gè)中獎(jiǎng)內(nèi)容：bg-lottery.png

3.點(diǎn)擊抽獎(jiǎng)按鈕： playbtn.png

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1066.html

相關(guān)文章

  • HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO

    摘要：圓盤(pán)抽獎(jiǎng)應(yīng)用頁(yè)面圓盤(pán)抽獎(jiǎng)應(yīng)用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO html頁(yè)面 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO演示 抱歉！瀏覽器不支持。 抱歉！瀏覽器不支持。 抱歉！瀏覽器...

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

  • HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO

    摘要：圓盤(pán)抽獎(jiǎng)應(yīng)用頁(yè)面圓盤(pán)抽獎(jiǎng)應(yīng)用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO html頁(yè)面 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO演示 抱歉！瀏覽器不支持。 抱歉！瀏覽器不支持。 抱歉！瀏覽器...

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

  • HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO

    摘要：圓盤(pán)抽獎(jiǎng)應(yīng)用頁(yè)面圓盤(pán)抽獎(jiǎng)應(yīng)用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO html頁(yè)面 HTML5 Canvas圓盤(pán)抽獎(jiǎng)應(yīng)用DEMO演示 抱歉！瀏覽器不支持。 抱歉！瀏覽器不支持。 抱歉！瀏覽器...

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

  • vue開(kāi)發(fā)微信商城項(xiàng)目總結(jié)之五--vue實(shí)現(xiàn)九宮格抽獎(jiǎng)

    摘要：根據(jù)產(chǎn)品提出的需求，需要做一個(gè)抽獎(jiǎng)活動(dòng)頁(yè)面需求簡(jiǎn)介九宮格抽獎(jiǎng)，中獎(jiǎng)概率可配置，以九宮格轉(zhuǎn)盤(pán)的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類(lèi)，實(shí)物類(lèi)獎(jiǎng)品，收貨人信息可編輯，默認(rèn)為登陸用戶(hù)，可生成訂單福幣類(lèi)獎(jiǎng)品，直接發(fā)放，可在交易明細(xì)中查看優(yōu)惠劵類(lèi)獎(jiǎng)品，交易明細(xì)中 根據(jù)產(chǎn)品提出的需求，需要做一個(gè)抽獎(jiǎng)活動(dòng)頁(yè)面 需求簡(jiǎn)介 九宮格抽獎(jiǎng)，中獎(jiǎng)概率可配置，以九宮格轉(zhuǎn)盤(pán)的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類(lèi)， 實(shí)物類(lèi)獎(jiǎng)品，收貨人...

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

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

0條評(píng)論

閱讀需要支付1元查看
<