翻板抽奖的实现流程:页面提供6个方块,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息。
下载资源
下载积分:
20
积分
HTML
首先我们在页面上放置6个奖项:
- 1
- 2
- 3
- 4
- 5
- 6
jQuery
点击每个方块,触发的事件: $("#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); //保存未中奖信息
});
});
});
翻开其他js代码: $("#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");
});
再次抽奖,刷新整个页面: $("#repeat").click(function() {
window.location.reload();
}); 参数
描述
默认值
抽奖
翻牌
-