当前位置:首页 > PHP教程 > php应用 > 列表

PHP+jQuery开发简单翻牌抽奖的功能(代码实例)

发布:smiling 来源: PHP粉丝网  添加日期:2022-05-29 08:50:18 浏览: 评论:0 

PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的。

PHP+jQuery开发简单翻牌抽奖的功能(代码实例)

在页面上放置6个奖项:

  1. <ul id="prize">  
  2.  
  3.     <li class="red" title="点击抽奖">1</li>  
  4.  
  5.     <li class="green" title="点击抽奖">2</li>  
  6.  
  7.     <li class="blue" title="点击抽奖">3</li>  
  8.  
  9.     <li class="purple" title="点击抽奖">4</li>  
  10.  
  11.     <li class="olive" title="点击抽奖">5</li>  
  12.  
  13.     <li class="brown" title="点击抽奖">6</li>  
  14.  
  15. </ul> 

点击每个方块,触发的事件:

  1. $("#prize li").each(function() {  
  2.  
  3.     var p = $(this);  
  4.  
  5.     var c = $(this).attr('class');  
  6.  
  7.     p.css("background-color", c);  
  8.  
  9.     p.click(function() {  
  10.  
  11.         $("#prize li").unbind('click'); //连续翻动  
  12.  
  13.         $.getJSON("ajax.php",  
  14.  
  15.         function(json) {  
  16.  
  17.             var prize = json.yes; //抽中的奖项   
  18.  
  19.             p.flip({  
  20.  
  21.                 direction: 'rl',  
  22.  
  23.                 //翻动的方向rl:right to left   
  24.  
  25.                 content: prize,  
  26.  
  27.                 //翻转后显示的内容即奖品   
  28.  
  29.                 color: c,  
  30.  
  31.                 //背景色   
  32.  
  33.                 onEnd: function() { //翻转结束   
  34.  
  35.                     p.css({  
  36.  
  37.                         "font-size""22px",  
  38.  
  39.                         "line-height""100px" 
  40.  
  41.                     });  
  42.  
  43.                     p.attr("id""r"); //标记中奖方块的id   
  44.  
  45.                     $("#viewother").show(); //显示查看其他按钮   
  46.  
  47.                     $("#prize li").unbind('click').css("cursor""default").removeAttr("title");  
  48.  
  49.                 }  
  50.  
  51.             });  
  52.  
  53.             $("#data").data("nolist", json.no); //保存未中奖信息   
  54.  
  55.         });  
  56.  
  57.     });  
  58.  
  59. }); 

翻开其他方块:

  1. $("#viewother").click(function() {  
  2.  
  3.     var mydata = $("#data").data("nolist"); //获取数据   
  4.  
  5.     var mydata2 = eval(mydata); //通过eval()函数可以将JSON转换成数组   
  6.  
  7.     $("#prize li").not($('#r')[0]).each(function(index) {  
  8.  
  9.         var pr = $(this);  
  10.  
  11.         pr.flip({  
  12.  
  13.             direction: 'bt',  
  14.  
  15.             color: 'lightgrey',  
  16.  
  17.             content: mydata2[index],  
  18.  
  19.             //奖品信息(未抽中)   
  20.  
  21.             onEnd: function() {  
  22.  
  23.                 pr.css({  
  24.  
  25.                     "font-size""22px",  
  26.  
  27.                     "line-height""100px",  
  28.  
  29.                     "color""#333" 
  30.  
  31.                 });  
  32.  
  33.                 $("#viewother").hide();  
  34.  
  35.             }  
  36.  
  37.         });  
  38.  
  39.     });  
  40.  
  41.     $("#data").removeData("nolist");  
  42.  
  43. }); 

Tags: PHP+jQuery翻牌抽奖

分享到: