扑克牌翻牌效果jquery插件
用jquery实现的扑克牌翻牌效果，未使用html5，效果当然没有html5的3d好，但是兼容性好。使用的扑克牌图片如下
源代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>扑克牌翻牌效果jquery插件</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
//config配置说明示例
/*
{
number:'扑克牌数量，默认6张',
backimage:'未翻开扑克牌背景图片地址，默认back.png',
width:'扑克牌宽度，默认63px',
height:'扑克牌高度，默认82px',
padding:'扑克牌距离父容器边距，默认5px',
timespan:'翻牌速度，单位ms，默认80ms',
url:'参考下面的说明，默认为测试的扑克牌图片地址数组',
dataType:'对url为动态页有效，指定返回的数据格式，默认text',
type:'对url为动态页有效，指定ajax请求方式，默认POST',
success:'对url为动态页有效，成功请求后执行的回调，参数(返回的结果)，返回结果类型和dataType指定的一致，如果指定了这个配置，回调一定要通过结果返回字符串，为扑克牌图片的地址。如果未配置此回到，动态页需要直接返回扑克牌图片地址'
error:'对url为动态页有效，请求失败指定的回调，参数(xhr对象)'
}
url：可以为扑克牌图片地址字符串数组或者动态页地址
1）字符串数组本地测试用
2）动态页地址为实际应用使用，需要保存结果到数据库，然后返回扑克牌图片地址，通过ajax调用动态页得到扑克牌图片地址*/
$.fn.flipPoker = function (config) {
//修改自：http://jankerli.com/example/flipPoker/
//修改成jquery对象方法by showbo，http://www.w3dev.cn/，使用请注明出处
var style = document.createElement('style'), css = '.flipBox {position: relative;float: left;}.flipBox .poker {position: absolute;cursor: pointer;background-position: center;background-repeat: no-repeat;}'; ;
style.type = 'text/css';
$('head').append(style);
if (style.styleSheet) style.styleSheet.cssText = css; else style.innerHTML = css;
return this.each(function () {
var flipPoker = {//扑克牌类库
//生成随机数，本地测试用
rnd: function (min, max) { var tmp = min; if (max < min) { min = max; max = tmp; } return Math.floor(Math.random() * (max - min + 1) + min); },
//扑克牌翻牌动画效果
flip: function (o, pokerimage, pockerwidth, timespan) {
o = $(o);
o.animate({
width: 0,
left: (pockerwidth / 2) + 'px'
}, timespan, function () {
o.css({ 'background-image': 'url(' + pokerimage + ')' });
o.animate({
width: pockerwidth + 'px',
left: '0'
}, timespan);
});
},
//初始化扑克牌外观和点击事件
init: function (poker) {
poker.css({ 'background-image': 'url(' + config.backimage + ')', width: config.width, height: config.height, left: config.padding, top: config.padding })
//设置扑克牌容器高度和宽度
.parent().css({ width: config.width + 2 * config.padding, height: config.height + 2 * config.padding });
poker.click(function () {
if (config.local) flipPoker.flip(this, config.url[flipPoker.rnd(0, config.url.length - 1)], config.width, config.timespan);
else {
var me = $(this);
$.ajax({ url: config.url, cache: false, dataType: config.dataType, type: config.type, success: function (rst) {
flipPoker.flip(me, typeof (config.success) == 'function' ? config.success.call(this, rst) : rst, config.width, config.timespan);
me.unbind('click');
me.css('cursor', 'default');
}, error: function (xhr) { if (typeof (config.error) == 'function') config.error.call(this, xhr); }
});
}
});
}
};
config = $.extend({ number: 6, backimage: 'back.png', url: ['poker1.png', 'poker2.png', 'poker3.png'], width: 63, height: 82, padding: 5, timespan: 80, type: 'POST' }, config);
config.local = !(typeof config.url == 'string');
var items = [];
for (var i = 0; i < config.number; i++) items[items.length] = '<div class="flipBox"><div class="poker"></div></div>';
flipPoker.init($(this).append(items.join('')).find('.poker'));
});
}
$(document.body).flipPoker({backimage:'/imgblog/20131212/1129100232.png',url:[ '/imgblog/20131212/1129212420.png','/imgblog/20131212/1129323045.png','/imgblog/20131212/1129405232.png']});
}
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：扑克牌翻牌效果jquery插件