制作一幅扑克牌系列三---动起来

制作一幅扑克牌系列三---动起来

本站原创：biny 时间：2009年2月20日21:38:11

转载请注明出处

加入了扑克牌拖动js功能，更像空当接龙小游戏了。顺便感谢一下草履虫，这段代码是从他哪儿抄来的，哈哈！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作一幅扑克牌</title>
<style type="text/css">
.card{width:125px;height:170px;position:absolute; overflow:hidden;border:1px #c0c0c0 solid;background:#fff;}
/*中间图片通用设置*/
span{display:block;width:20px;height:21px; position:absolute;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat;}
/*小图片通用设置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat; overflow:hidden;}
/*数字通用设置*/
em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat;overflow:hidden;}
/*各坐标点位置*/
.N1{left:1px;top:8px;}
.First{left:5px;top:20px;}
.A1{left:20px;top:20px;}
.A2{left:20px;top:57px;}
.A3{left:20px;top:94px;}
.A4{left:20px;top:131px;}
.AM{left:20px;top:75px;}
.AM1{left:54px;top:20px;}
.B1{left:54px;top:38px;}
.B2{left:54px;top:117px;}
.BM{left:54px;top:75px;}
.C1{left:86px;top:20px;}
.C2{left:86px;top:57px;}
.C3{left:86px;top:94px;}
.C4{left:86px;top:131px;}
.CM{left:86px;top:75px;}
.CM1{left:54px;top:131px;}
.Last{bottom:21px;right:0px;}
.N2{bottom:8px;right:4px;
}
/*大图标黑红梅方四种图片-上方向*/
.up1{background-position:0 1px;}/*黑桃*/
.up2{background-position:-19px 1px;}/*红桃*/
.up3{background-position:-39px 1px;}/*梅花*/
.up4{background-position:-58px 1px;width:19px;}/*方块*
/*大图标黑红梅方四种图片-下方向*/
.down1{background-position:0 -19px;}/*黑桃*/
.down2{background-position:-19px -19px;}/*红桃*/
.down3{background-position:-38px -19px;}/*梅花*/
.down4{background-position:-58px -19px;width:19px;}/*方块*/
/*小图标黑红梅方四种图片-上方向*/
.small_up1{background-position:0 -40px;}/*黑桃*/
.small_up2{background-position:-19px -40px;}/*红桃*/
.small_up3{background-position:-57px -40px;}/*梅花*/
.small_up4{background-position:-38px -40px;}/*方块*/
/*小图标黑红梅方四种图片-下方向*/
.small_down1{background-position:0 -51px;}/*黑桃*/
.small_down2{background-position:-19px -51px;}/*红桃*/
.small_down3{background-position:-57px -51px;}/*梅花*/
.small_down4{background-position:-38px -51px;}/*方块*/
/*A~k数字图片-左上角*/
.nA{background-position:-75px 0px;left:4px;}
.n2{background-position:-87px 0px;}
.n3{background-position:-100px 0px;}
.n4{background-position:-113px 0px;}
.n5{background-position:-126px 0px;}
.n6{background-position:-139px 0px;}
.n7{background-position:-152px 0px;}
.n8{background-position:-165px 0px;}
.n9{background-position:-178px 0px;}
.n10{background-position:-191px 0px;left:-4px;width:21px;}
.nJ{background-position:-214px 0px;left:4px;}
.nQ{background-position:-227px 0px;left:2px;}
.nK{background-position:-241px 0px;left:0px;}
/*A~k数字图片-右下角*/
.nA_h{background-position:-75px -22px;right:2px;}
.n2_h{background-position:-87px -22px;}
.n3_h{background-position:-100px -22px;}
.n4_h{background-position:-113px -22px;}
.n5_h{background-position:-126px -22px;}
.n6_h{background-position:-139px -22px;}
.n7_h{background-position:-152px -22px;}
.n8_h{background-position:-165px -22px;}
.n9_h{background-position:-178px -22px;}
.n10_h{background-position:-191px -22px;right:3px;width:21px;}
.nJ_h{background-position:-214px -22px;right:2px;}
.nQ_h{background-position:-227px -22px;right:4px;}
.nK_h{background-position:-241px -22px;right:6px;}
/*A~k数字图片-左上角红色字*/
.nA_red{background-position:-75px -11px;}
.n2_red{background-position:-87px -11px;}
.n3_red{background-position:-100px -11px;}
.n4_red{background-position:-113px -11px;}
.n5_red{background-position:-126px -11px;}
.n6_red{background-position:-139px 0px;}
.n7_red{background-position:-152px -11px;}
.n8_red{background-position:-165px 0px;}
.n9_red{background-position:-178px -11px;}
.n10_red{background-position:-191px 0px;}
.nJ_red{background-position:-214px -11px;}
.nQ_red{background-position:-227px -11px;}
.nK_red{background-position:-240px -11px;}
/*A~k数字图片-右下角红色字*/
.nA_h_red{background-position:-75px -33px;}
.n2_h_red{background-position:-87px -33px;}
.n3_h_red{background-position:-100px -33px;}
.n4_h_red{background-position:-113px -33px;}
.n5_h_red{background-position:-126px -33px;}
.n6_h_red{background-position:-139px -33px;}
.n7_h_red{background-position:-152px -33px;}
.n8_h_red{background-position:-165px -33px;}
.n9_h_red{background-position:-178px -33px;}
.n10_h_red{background-position:-191px -33px;}
.nJ_h_red{background-position:-214px -33px;}
.nQ_h_red{background-position:-227px -33px;}
.nK_h_red{background-position:-241px -33px;}
/*J,Q,K的位置有点偏移*/
.J1{left:23px;top:23px;z-index:1;}
.J4{left:80px;top:128px;}
/*J,Q,K的中间图片*/
.BJ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat 0px -62px;}
.BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat -80px -62px;}
.BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://images.cnblogs.com/likecs_com/binyong/card.gif) no-repeat -160px -62px;}
.back{width:100%;height:100%;background:url(http://images.cnblogs.com/likecs_com/binyong/cardback.gif);}
#idDrag1{left:10px;top:15px;}
#idDrag2{left:150px;top:15px;}
#idDrag3{left:290px;top:15px;}
#idDrag4{left:430px;top:15px;}
#idDrag5{left:570px;top:15px;}
#idDrag6{left:10px;top:45px;}
#idDrag7{left:150px;top:45px;}
#idDrag8{left:290px;top:45px;}
#idDrag9{left:430px;top:45px;}
#idDrag10{left:570px;top:45px;}
#idDrag11{left:10px;top:75px;}
#idDrag12{left:150px;top:75px;}
#idDrag13{left:290px;top:75px;}
#idDrag14{left:430px;top:75px;}
#idDrag15{left:570px;top:75px;}
</style>
<script type="text/javascript">
/*--------------------------------------------------------------
* 程序名:拖拽区域块
* 修改者:草履虫
* email:caolvchong@gmail.com
* 主页:http://cceer.xmu.edu.cn/blog/
* 原始来源:http://bbs.blueidea.com/thread-2817125-1-1.html
* 增加功能:拖拽后的z-index设置
* Plus:有疑问或者建议请联系email
* --------------------------------------------------------------
*/
//<![CDATA[
function move(id){
this.node = document.getElementById(id);
this.name = id;
this.node.style.cursor = "move";
this.zindex =  parseInt(this.node.getAttribute("id").replace(/\D/g,""));
this.node.style.zIndex = this.zindex;
this.node.me = this;
this.node.onmousedown = this.mouse_down;
}
move.prototype.mouse_down = function(e){
e = window.event?window.event:e;
this.me.node.style.zIndex += 10000;// --->被修改了,原来100,现在10000
this.me.node.sub_x = e.clientX - this.me.node.offsetLeft;
this.me.node.sub_y = e.clientY - this.me.node.offsetTop;
this.me.node.onmousemove = this.me.mouse_move;
this.me.node.onmouseup = this.me.mouse_up;
}
move.prototype.mouse_move = function(e){
e = window.event?window.event:e;
this.me.node.style.cursor = "pointer";
this.me.node.style.left = e.clientX - this.me.node.sub_x + "px";
this.me.node.style.top = e.clientY - this.me.node.sub_y + "px";
this.me.node.onmouseup = this.me.mouse_up;
}
move.prototype.mouse_up = function(){
this.me.node.onmousemove = "";
this.me.node.style.cursor = "move";
this.me.node.style.zIndex = this.me.zindex;    //还原被增加的z-index
var z_index = this.me.zindex ;    //获取当前z-index
for(var i = 0; i < document.getElementsByTagName("div").length; i++){    //获取最大z-index
if(z_index < document.getElementsByTagName("div")[i].style.zIndex){
z_index = parseInt(document.getElementsByTagName("div")[i].style.zIndex);
}
}
this.me.node.style.zIndex = z_index + 1;    //移动后的z-index,而不是还原
}
window.onload = function(){
new move("idDrag1");
new move("idDrag2");
new move("idDrag3");
new move("idDrag4");
new move("idDrag5");
new move("idDrag6");
new move("idDrag7");
new move("idDrag8");
new move("idDrag9");
new move("idDrag10");
new move("idDrag11");
new move("idDrag12");
new move("idDrag13");
new move("idDrag14");
new move("idDrag15");
}
// ]]>
</script>
</head>
<body>

<div class="card" >
<div class="front">
<b class="N1 nA"></b>
<i class="First small_up1"></i>
<i class="Last small_down1"></i>
<b class="N2 nA_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n2_red"></b>
<i class="First small_up2"></i>
<i class="Last small_down2"></i>
<b class="N2 n2_h_red"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n3"></b>
<i class="First small_up3"></i>
<i class="Last small_down3"></i>
<b class="N2 n3_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n4_red"></b>
<i class="First small_up4"></i>
<i class="Last small_down4"></i>
<b class="N2 n4_h_red"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n5"></b>
<i class="First small_up1"></i>
<i class="Last small_down1"></i>
<b class="N2 n5_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n6"></b>
<i class="First small_up1"></i>
<i class="Last small_down1"></i>
<b class="N2 n6_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n7_red"></b>
<i class="First small_up2"></i>
<i class="Last small_down2"></i>
<b class="N2 n7_h_red"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n8"></b>
<i class="First small_up3"></i>
<i class="Last small_down1"></i>
<b class="N2 n8_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n9_red"></b>
<i class="First small_up4"></i>
<i class="Last small_down4"></i>
<b class="N2 n9_h_red"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 n10"></b>
<i class="First small_up1"></i>
<i class="Last small_down1"></i>
<b class="N2 n10_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 nJ"></b>
<i class="First small_up1"></i>
<i class="Last small_down1"></i>
<b class="N2 nJ_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 nQ_red"></b>
<i class="First small_up2"></i>
<b class="N2 nQ_h_red"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 nK"></b>
<i class="First small_up3"></i>
<i class="Last small_down3"></i>
<b class="N2 nK_h"></b>
</div>
</div>

<div class="card" >
<div class="front">
<b class="N1 nK nK_red"></b>
<i class="First small_up4"></i>
<i class="Last small_down4"></i>
<b class="N2 nK_h nK_h_red"></b>
</div>
</div>

<div class="card" >
<div class="back">
</div>
</div>
</body>
</html>