项目地址: 点击查看 https://github.com/Topthinking/Jslottery
展示效果:
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>Jslottery</title>
- <meta charset="utf-8"/>
- <style>
- .machine{
- margin: 0px auto;
- width:280px;
- }
- .prize-cell{
- background-color: #cb1573;
- width: 64px;
- height: 66px;
- position: relative;
- }
- .prize-cell::after{
- background:rgba(0,0,0,0.2) none repeat scroll 0% 0%;
- content: "";
- bottom: 0px;
- left: 0;
- right: 0;
- height: 5px;
- position: absolute;
- }
- .machine-control-cell{
- background-color: #278EF2;
- }
- .machine-control{
- width: 92px;
- height: 96px;
- position: absolute;
- margin: -44px 0px 0px 20px;
- border-radius: 42%;
- border: 1px solid #ff0;
- cursor: pointer;
- }
- .machine-control span{
- font-size: 30px;
- float: left;
- margin: 28px 0px 0px 16px;
- }
- </style>
- </head>
- <body>
- <div class="machine">
- <table class="machine-table">
- <tbody>
- <tr>
- <td class="prize-cell" data-id="1"></td>
- <td class="prize-cell" data-id="2"></td>
- <td class="prize-cell" data-id="3"></td>
- <td class="prize-cell" data-id="4"></td>
- </tr>
- <tr>
- <td class="prize-cell" data-id="12"></td>
- <td class="machine-control-cell" colspan="2" rowspan="2">
- <div class="machine-control" onclick="ClickMe(event)">
- <span > 抽奖 </span>
- </div>
- </td>
- <td class="prize-cell" data-id="5"></td>
- </tr>
- <tr>
- <td class="prize-cell" data-id="11"></td>
- <td class="prize-cell" data-id="6"></td>
- </tr>
- <tr>
- <td class="prize-cell" data-id="10"></td>
- <td class="prize-cell" data-id="9"></td>
- <td class="prize-cell" data-id="8"></td>
- <td class="prize-cell" data-id="7"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <script type="text/javascript" src="http://topthinking.github.io/demos/jslottery/jslottery.js"></script>
- <script type="text/javascript">
- var jslottery = new Jslottery({
- scroll_dom:'prize-cell',
- scroll_dom_CSS_value:'#ffff7e',
- scroll_dom_attr:'data-id',
- scroll_dom_css:'background-color',
- start_position:Math.floor(Math.random()*12+1),
- callback:function(data){}
- });
- function ClickMe(){
- jslottery.options.stop_position=Math.floor(Math.random()*12+1);
- jslottery.options.speed=Math.floor(Math.random()*200+300);
- jslottery.options.speed_up_position=Math.floor(Math.random()*6+1);
- jslottery.options.speed_down_position=Math.floor(Math.random()*6+1);
- jslottery.options.speedUp=Math.floor(Math.random()*30+20);
- jslottery.options.speedDown=Math.floor(Math.random()*100+600);
- jslottery.options.total_circle=Math.floor(Math.random()*5+2);
- jslottery.start();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40186/47902b9c79576b4d6eda6daf09a141bb.html