这篇文章主要讲解了“如何利用PHP+jQuery开发简单翻牌抽奖的功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用PHP+jQuery开发简单翻牌抽奖的功能”吧！
创新互联公司2013年至今，先为台儿等服务建站，台儿等地企业，进行企业商务咨询服务。为台儿企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
PHP+jQuery开发简单的翻牌抽奖实例，实现流程：页面放置6个方块作为奖项，当抽奖者点击某一块时，方块翻转到背面，显示中奖信息，这个奖品是随机的，不是固定的。
在页面上放置6个奖项：
1
2
3
4
5
6
点击每个方块，触发的事件：
$("#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");
});感谢各位的阅读，以上就是“如何利用PHP+jQuery开发简单翻牌抽奖的功能”的内容了，经过本文的学习后，相信大家对如何利用PHP+jQuery开发简单翻牌抽奖的功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
本文名称：如何利用PHP+jQuery开发简单翻牌抽奖的功能
网页链接：
http://bjjierui.cn/article/goshpp.html
