jquery实现老虎机抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现老虎机抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

    <meta charset="UTF-8">
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    img {
      vertical-align: bottom;
    }
    .game-header {
      width: 100%;
    }
    .game-header img {
      width: 100%;
    }
    .game-content {
      position: relative;
      width: 100%;
    }
    .game-content img {
      width: 100%;
    }
    .game-goods-wrap {
      position: absolute;
      margin: 0 auto;
      top: 12%;
      left: 0;
      right: 0;
      bottom: 0;
      width: 64%;
      height: 50%;
      border-top-left-radius: 0.1875rem;
      border-top-right-radius: 0.1875rem;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      overflow: hidden;
    }
    .game-goods-wrap:before {
      position: absolute;
      top: -1PX;
      right: 0;
      bottom: 1PX;
      left: -1PX;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      width: 101%;
      height: 100%;
      content: "";
      box-shadow: 0 1.25rem 1.25rem -1.25rem #000 inset;
      z-index: 12;
    }
    .game-goods-wrap:after {
      position: absolute;
      top: 1PX;
      right: 0;
      bottom: -1PX;
      left: -1PX;
      width: 101%;
      height: 100%;
      box-shadow: 0 -1.25rem 1.25rem -1.25rem #000 inset;
      z-index: 12;
      content: "";
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }
    .game-goods-list {
      height: 100%;
      overflow: hidden;
    }
    .game-goods {
      position: absolute;
      width: 32%;
      height: 100%;
      z-index: 10;
      overflow: hidden;
    }
    .game-goods:first-child {
      left: -32%;
      transform: translateX(100%);
      -ms-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      -o-transform: translateX(100%);
    }
    .game-goods:nth-child(2) {
      left: 50%;
      transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
    }
    .game-goods:last-child {
      left: 100%;
      transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      -o-transform: translateX(-100%);
    }
    .game-goods-box {
      height: 70%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .game-goods-ul {
      position: relative;
      top: 0;
      font-size: 0;
      z-index: 10;
    }
    .game-goods-ul li {
      position: relative;
      width: 100%;
    }
    .game-goods-ul li img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      height: 90%;
      width: auto;
    }
    .play {
      transition-duration: 5500ms;
      transform: translate(0px, -3263.91px) translateZ(0px);
    }
    .game-rule {
      position: absolute;
      top: 71%;
      left: 15%;
      width: 8%;
      height: 18%;
    }
    .no-login-game-btn {
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: 40%;
      height: 32%;
    }
    .game-btn {
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: 40%;
      height: 32%;
    }
    .game-prize {
      position: absolute;
      top: 20%;
      right: 2%;
      width: 12%;
      height: 30%;
    }
    </style>
</head>

<body>
    <a class="game-header" href="javascript:void(0);">
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/2/1p.png">
    </a>
    <div class="game-content">
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/2/2p.png">
        <div class="game-goods-wrap">
            <div class="game-goods-list">
                <div class="game-goods" style="background: #ffffff;">
                    <div class="game-goods-box" id="game1">
                        <ul class="game-goods-ul" style="">

                        </ul>
                    </div>
                </div>
                <div class="game-goods" style="background: #ffffff;">
                    <div class="game-goods-box" id="game2">
                        <ul class="game-goods-ul" style="">

                        </ul>
                    </div>
                </div>
                <div class="game-goods" style="background: #ffffff;">
                    <div class="game-goods-box" id="game3">
                        <ul class="game-goods-ul">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <a class="game-rule" href="javascript:void(0);"></a>
        <span class="game-btn"></span>
        <a class="game-prize" href="javascript:void(0);" js-href="/index/myActiveDraw"></a>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script>
        $.extend({
        		    luckGame: function(options) {
        		    	var defaults = {
        		    	        'gameLen': '18',
        		    	        'game_pagesize':10,//生成多少圈同样的东西
        		    	        'zj_arr': { //中奖数组，第一个表示是否中奖，第二个中奖号码
        		    	        	'is_win':1,
        		    	        	'number':17
        		    	        }
        		    	    };
        		         var settings = $.extend(defaults, options);
        		         w_config={
        		         	'w':$(window).width(),
        		         	'h':$(window).height()
        		         }
        		         var gameArr=[];
        		         var gameLen=settings.gameLen;
        		         var game_list_h='';
        		         var game_init=[];
        		         var game_list_item_h=0;
        
        		          //每次进来随机3个数字，来启动当前的选择的状态
        		          for (var i = 0; i < 3; i++) {
        		          	
        		          	game_init.push(Math.floor(Math.random() * gameLen));
        		          }
        		          createGame();
        		          $(window).resize(function(){
        		         	
        		         	 createGame();
        		         })
        		          function createGame(){
        		          	getHeight();
        		          	setLi();
        		          	pushLi(gameArr);
        		          	start();
        		          }
        
        
        		          function getHeight(){
        		          	w_config={
  .........完整代码请登录后点击上方下载按钮下载查看