互动游戏网页抽签版

　　互动游戏，可以随机选择图片（图片上带有游戏内容），与所选择的字无关。

网页效果

点击前

点击后
　　屏幕左下角显示游戏图片编号，游戏内容选择与所选的文字无关，带有时钟，可以设置计时任务。网页源码见InteractiveGame。

代码实现

html部分：

  <div class="main">    <h1>东拼西凑</h1>    <div id="content">      <div id="littleBoxes" class="littleBoxes">        <div id="item11">          <a class="title" href="">欢</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item12">          <a class="title" href="">迎</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item13">          <a class="title" href="">来</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item21">          <a class="title" href="">金</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item22">          <a class="title" href="">礼</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item23">          <a class="title" href="">伟</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item31">          <a class="title" href="">的</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item32">          <a class="title" href="">网</a>          <div class="boxcontent"><img /></div>        </div>        <div id="item33">          <a class="title" href="">页</a>          <div class="boxcontent"><img /></div>        </div>      </div>    </div>    <div id="clock" class="clock-container">      <div style="position: absolute; top: 270px; left: 30px;">        <p class="clock">          <a id="hours"></a>:          <a id="min"></a>:          <a id="sec"></a>        </p>      </div>    </div>    <div id="topbox"></div>    <footer>      <h1 style="font-size: 24px; color: #fff;">出品人：<a href="mailto:[e-mail]" style="color: #fff;">金礼伟</a>&nbsp;游戏编号：<a id="gameid">1</a></h1>    </footer>  </div>

js代码，可以修改格子大小：

$(function() {  var w = 200; //littleBoxes width  var h = 200; //littleBoxes height  $('#item11').css({ 'top': 0, 'left': 0 });  $('#item12').css({ 'top': 0, 'left': w + 5 });  $('#item13').css({ 'top': 0, 'left': (w + 5) * 2 });  $('#item21').css({ 'top': h + 5, 'left': 0 });  $('#item22').css({ 'top': h + 5, 'left': w + 5 });  $('#item23').css({ 'top': h + 5, 'left': (w + 5) * 2 });  $('#item31').css({ 'top': (h + 5) * 2, 'left': 0 });  $('#item32').css({ 'top': (h + 5) * 2, 'left': w + 5 });  $('#item33').css({ 'top': (h + 5) * 2, 'left': (w + 5) * 2 });  /* object to save the initial positions of each box */  var divinfo = { "initial": [] };  /* index of the selected / clicked box */  var current = -1;  /* we save the index,top and left of each one of the boxes */  $('#littleBoxes > div').each(function() {    var $this = $(this);    var initial = {      'index': $this.index(),      'top': $this.css('top'),      'left': $this.css('left')    };    divinfo.initial.push(initial);  });  /* clcik event for the anchors inside of the boxes */  $('#littleBoxes a').bind('click', function(e) {    /* top block disable the click function顶层遮挡层，在动画期间遮挡点击动作 */    $('#topbox').css({ "width": document.documentElement.clientWidth, "height": document.documentElement.clientHeight, "background-color": "#000", "opacity": "0", "z-index": "999" });    /* timer，execute function after interval time定时器，到时间间隔后执行函数 */    window.setTimeout(function() { $('#topbox').css({ "width": "0px", "height": "0px" }); }, 1000);    var $this = $(this);    var $currentBox = $this.parent();    /* set a z-index lower than all the other boxes,    to see the other boxes animation on the top*/    $currentBox.css('z-index', '1');    /* if we are clicking on a expanded box : */    if (current == $currentBox.index()) {      /* put it back (decrease width,height, and set the top and left like it was before).      the previous positions are saved in the divinfo obj*/      $currentBox.stop().animate({        'top': divinfo.initial[$currentBox.index()].top,        'left': divinfo.initial[$currentBox.index()].left,        'width': w + 'px',        'height': h + 'px'      }, 800, 'easeOutBack').find('.boxcontent').fadeOut();      $('#littleBoxes > div').not($currentBox).each(function() {        var $ele = $(this);        var elemTop = divinfo.initial[$ele.index()].top;        var elemLeft = divinfo.initial[$ele.index()].left;        $ele.stop().show().animate({          'top': elemTop,          'left': elemLeft,          'opacity': 1        }, 800);      });      current = -1;    }    /* if we are clicking on a small box : */    else {      /* randomly animate all the other boxes.      Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.      This range is considering the initial lefts/tops of the elements. It's not the exact right      range, since we would have to calculate the range based on each one of the boxes. Anyway, it      fits our needs...      */      $('#littleBoxes > div').not($currentBox).each(function() {        var $ele = $(this);        $ele.stop().animate({          'top': (Math.floor(Math.random() * 600) - 100) + 'px',          'left': (Math.floor(Math.random() * 900) - 450) + 'px',          'opacity': 0        }, 800, function() {          $(this).hide();        });      });      /* expand the clicked one. Also, fadeIn the content (boxcontent)      if you want it to fill the space of the littleBoxes container,      then these are the right values */      var newwidth = w * 3 + 12;      var newheight = h * 3 + 12;      $currentBox.stop().animate({        'top': '0px', //0px        'left': '0px', //0px        'width': newwidth + 'px',        'height': newheight + 'px'      }, 800, 'easeOutBack', function() {        current = $currentBox.index();        $(this).find('.boxcontent').fadeIn();      });      /* random a number, change the image src and display the number */      var ch = 1 + Math.floor(Math.random() * 9);      $currentBox.find('img').attr('src', './img/' + ch + '.jpg'); //find the img in clicked currentBox and change it's src      $('#gameid').text(ch); //display the random number    }    e.preventDefault();  });});