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

2024-03-16 02:38:31

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

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

<script type="text/javascript"></script> <!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;} /*中间图片通用设置*/ span{display:block;width:20px;height:21px; position:absolute;background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat;} /*小图片通用设置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.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(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.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(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat 0px -62px;} .BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat -80px -62px;} .BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat -160px -62px;} .back{width:100%;height:100%;background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090201/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">被修改了,原来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" id="idDrag1"> <div class="front"> <b class="N1 nA"></b> <em class="First small_up1"></em> <span class="BM up1"></span> <em class="Last small_down1"></em> <b class="N2 nA_h"></b> </div> </div>  <div class="card" id="idDrag2"> <div class="front"> <b class="N1 n2_red"></b> <em class="First small_up2"></em> <span class="AM1 up2"></span> <span class="CM1 down2"></span> <em class="Last small_down2"></em> <b class="N2 n2_h_red"></b> </div> </div>  <div class="card" id="idDrag3"> <div class="front"> <b class="N1 n3"></b> <em class="First small_up3"></em> <span class="AM1 up3"></span> <span class="BM up3"></span> <span class="CM1 down3"></span> <em class="Last small_down3"></em> <b class="N2 n3_h"></b> </div> </div>  <div class="card" id="idDrag4"> <div class="front"> <b class="N1 n4_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A4 down4"></span> <span class="C1 up4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n4_h_red"></b> </div> </div>  <div class="card" id="idDrag5"> <div class="front"> <b class="N1 n5"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A4 down1"></span> <span class="BM up1"></span> <span class="C1 up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n5_h"></b> </div> </div>  <div class="card" id="idDrag6"> <div class="front"> <b class="N1 n6"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="AM up1"></span> <span class="A4 down1"></span> <span class="C1 up1"></span> <span class="CM up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n6_h"></b> </div> </div>  <div class="card" id="idDrag7"> <div class="front"> <b class="N1 n7_red"></b> <em class="First small_up2"></em> <span class="A1 up2"></span> <span class="AM up2"></span> <span class="A4 down2"></span> <span class="BM up2"></span> <span class="C1 up2"></span> <span class="CM up2"></span> <span class="C4 down2"></span> <em class="Last small_down2"></em> <b class="N2 n7_h_red"></b> </div> </div>  <div class="card" id="idDrag8"> <div class="front"> <b class="N1 n8"></b> <em class="First small_up3"></em> <span class="A1 up3"></span> <span class="A2 up3"></span> <span class="A3 down3"></span> <span class="A4 down3"></span> <span class="C1 up3"></span> <span class="C2 up3"></span> <span class="C3 down3"></span> <span class="C4 down3"></span> <em class="Last small_down1"></em> <b class="N2 n8_h"></b> </div> </div>  <div class="card" id="idDrag9"> <div class="front"> <b class="N1 n9_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A2 up4"></span> <span class="A3 down4"></span> <span class="A4 down4"></span> <span class="BM up4"></span> <span class="C1 up4"></span> <span class="C2 up4"></span> <span class="C3 down4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n9_h_red"></b> </div> </div>  <div class="card" id="idDrag10"> <div class="front"> <b class="N1 n10"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A2 up1"></span> <span class="A3 down1"></span> <span class="A4 down1"></span> <span class="B1 up1"></span> <span class="B2 down1"></span> <span class="C1 up1"></span> <span class="C2 up1"></span> <span class="C3 down1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n10_h"></b> </div> </div>  <div class="card" id="idDrag11"> <div class="front"> <b class="N1 nJ"></b> <em class="First small_up1"></em> <span class="J1 up1"></span> <span class="BJ"></span> <span class="J4 down1"></span> <em class="Last small_down1"></em> <b class="N2 nJ_h"></b> </div> </div>  <div class="card" id="idDrag12"> <div class="front"> <b class="N1 nQ_red"></b> <em class="First small_up2"></em> <span class="J1 up2"></span> <span class="BQ"></span> <span class="J4 down2"></span> <span class="Last small_down2"></span> <b class="N2 nQ_h_red"></b> </div> </div>  <div class="card" id="idDrag13"> <div class="front"> <b class="N1 nK"></b> <em class="First small_up3"></em> <span class="J1 up3"></span> <span class="BK"></span> <span class="J4 down3"></span> <em class="Last small_down3"></em> <b class="N2 nK_h"></b> </div> </div>  <div class="card" id="idDrag14"> <div class="front"> <b class="N1 nK nK_red"></b> <em class="First small_up4"></em> <span class="J1 up4"></span> <span class="BK"></span> <span class="J4 down4"></span> <em class="Last small_down4"></em> <b class="N2 nK_h nK_h_red"></b> </div> </div>  <div class="card" id="idDrag15"> <div class="back"> </div> </div> </body> </html>

提示：您可以先修改部分代码再运行

制作一幅扑克牌系列三---动起来相关推荐

前端工程师和设计师必读文章推荐【系列三十三】
<Web 前端开发精华文章推荐>自2011年6月20号发布第一期以来,历经三年半,总共发布了30多期.今天这篇是2015年第2期(总第33期),希望你能在这里发现有用的资料. 梦想天空专注 ...
基于pygame的射击小游戏制作（一）让飞船动起来
基于pygame的射击小游戏制作(一)让飞船动起来一.文件结构 alien_invasion.py 是整个系统的主文件,用来创建游戏中的一系列对象,ai_settings存储设置.screen存储显 ...
前端工程师和设计师必读文章推荐【系列三十六】
<Web 前端开发精华文章推荐>自2011年6月20号发布第一期以来,历经五年半,总共发布了30多期.今天这篇是2017年第2期(总第36期),希望你能在这里发现有用的资料. 梦想天空专注 ...
12款免费素材图标系列三
为什么80%的码农都做不了架构师?>>> 日期:2013-3-4 来源:GBin1.com 45个 iOS Tab Bar icon 一套45个为retina显示器设计的ta ...
C#制作Windows service服务系列二:演示一个定期执行的windows服务及调试（windows service）(转载)...
系列一: 制作一个可安装.可启动.可停止.可卸载的Windows service(downmoon原创) 系列二:演示一个定期执行的windows服务及调试(windows service)(down ...
架构系列三：使用Keepalived+Nginx+tomcat实现集群部署
架构系列三:使用Keepalived+Nginx+tomcat实现集群部署介绍了通过Nginx配置Tomct集群,当其中一个Tomcat服务停止后,Nginx可自动识别并选择另一个服务器响应用户请求 ...
DTCMS插件的制作实例电子资源管理（三）前台模板页编写
总目录插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
Web 开发人员和设计师必读文章推荐【系列三十】
<Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
html网页肯德基设计代码作业,AI快速制作一幅肯德基广告单页教程
这篇AI教程向脚本之家上的朋友介绍AI快速制作一幅肯德基广告单页方法,教程以实例的形式向我们介绍广告单页的制作方法,很实用,也比较简单,喜欢的朋友快来学习一下吧! 首先来看一下最终效果图: 本幅广告页 ...

最新文章

热门文章