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

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 1466人閱讀

摘要：需求抽獎(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ù)制下面的圖片名稱-鼠標(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://systransis.cn/yun/1066.html

相關(guān)文章

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

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

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

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

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

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

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

    摘要：圓盤抽獎(jiǎng)應(yīng)用頁(yè)面圓盤抽獎(jiǎng)應(yīng)用演示抱歉瀏覽器不支持。 HTML5 Canvas圓盤抽獎(jiǎng)應(yīng)用DEMO html頁(yè)面 HTML5 Canvas圓盤抽獎(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)盤的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類，實(shí)物類獎(jiǎng)品，收貨人信息可編輯，默認(rèn)為登陸用戶，可生成訂單福幣類獎(jiǎng)品，直接發(fā)放，可在交易明細(xì)中查看優(yōu)惠劵類獎(jiǎng)品，交易明細(xì)中 根據(jù)產(chǎn)品提出的需求，需要做一個(gè)抽獎(jiǎng)活動(dòng)頁(yè)面 需求簡(jiǎn)介 九宮格抽獎(jiǎng)，中獎(jiǎng)概率可配置，以九宮格轉(zhuǎn)盤的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類， 實(shí)物類獎(jiǎng)品，收貨人...

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

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

0條評(píng)論

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