PHP+jQuery開發簡單的翻牌抽獎實例,實現流程:頁面放置6個方塊作爲獎項,當抽獎者點擊某一塊時,方塊翻轉到背面,顯示中獎信息,這個獎品是隨機的,不是固定的。
在頁面上放置6個獎項:
<ul id="prize">
<li class="red" title="點擊抽獎">1</li>
<li class="green" title="點擊抽獎">2</li>
<li class="blue" title="點擊抽獎">3</li>
<li class="purple" title="點擊抽獎">4</li>
<li class="olive" title="點擊抽獎">5</li>
<li class="brown" title="點擊抽獎">6</li>
</ul>
點擊每個方塊,觸發的事件:
$("#prize li").each(function() {
var p = $(this);
var c = $(this).attr('class');
p.css("background-color", c);
p.click(function() {
$("#prize li").unbind('click'); //連續翻動
$.getJSON("ajax.php",
function(json) {
var prize = json.yes; //抽中的獎項
p.flip({
direction: 'rl',
//翻動的方向rl:right to left
content: prize,
//翻轉後顯示的內容即獎品
color: c,
//背景色
onEnd: function() { //翻轉結束
p.css({
"font-size": "22px",
"line-height": "100px"
});
p.attr("id", "r"); //標記中獎方塊的id
$("#viewother").show(); //顯示查看其他按鈕
$("#prize li").unbind('click').css("cursor", "default").removeAttr("title");
}
});
$("#data").data("nolist", json.no); //保存未中獎信息
});
});
});
翻開其他方塊:
$("#viewother").click(function() {
var mydata = $("#data").data("nolist"); //獲取數據
var mydata2 = eval(mydata); //通過eval()函數可以將JSON轉換成數組
$("#prize li").not($('#r')[0]).each(function(index) {
var pr = $(this);
pr.flip({
direction: 'bt',
color: 'lightgrey',
content: mydata2[index],
//獎品信息(未抽中)
onEnd: function() {
pr.css({
"font-size": "22px",
"line-height": "100px",
"color": "#333"
});
$("#viewother").hide();
}
});
});
$("#data").removeData("nolist");
});
本文轉自:https://www.sucaihuo.com/php/118.html 轉載請註明出處!