jQuery人物拼图游戏代码

来源：互联网 2023-03-16 23:55:32 版权归原作者所有，如有侵权，请联系我们

jQuery人物拼图游戏代码

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery人物拼图游戏代码

准备好需要用到的图标。

jQuery人物拼图游戏代码

书写hmtl代码。

body>

div class="pic">

div id="box"> img class="pj" src="images/201__.png"> img class="p2" src="images/202.png"> img class="p3" src="images/203.png"> img class="p4" src="images/204.png"> img class="p5" src="images/205.png"> img class="p6" src="images/206.png"> img class="p7" src="images/207.png"> img class="p8" src="images/208.png"> img class="p9" src="images/209.png"> /div>

div id="output"> img alt="" src="images/2.jpg"> /div>

/div>

!-- 提示 -->

div class="time">

英雄，您已作战span>0/span>秒/

/div>

div class="bu">

英雄，您已经走了span>0/span>步/

/div>

input type="button" id="button" value="开始新游戏">

jQuery人物拼图游戏代码

书写css代码。

style type="text/css">

* { margin: 0px; padding: 0px; border: 0px; }

#box { width: 300px; height: 300px; position: relative; border: 1px solid #ccc; }

.pic { width: 528px; margin: 16px auto 0px; }

.pic>div { display: inline-block; }

#box img { float: left; width: 100px; height: 100px; }

#box .pj, #box .p2, #box .p3, #box .p4, #box .p5, #box .p6, #box .p7, #box .p8, #box .p9 { position: absolute; }

#box .pj, #box .p2, #box .p3 { top: 0px; }

#box .p4, #box .p5, #box .p6 { top: 100px; }

#box .p7, #box .p8, #box .p9 { top: 200px; }

#box .pj, #box .p4, #box .p7 { left: 0px; }

#box .p2, #box .p5, #box .p8 { left: 100px; }

#box .p3, #box .p6, #box .p9 { left: 200px; }

#button { padding: 6px; color: #fff; background: #574a4a; border-radius: 4px; margin: 0 auto; display: block }

#output { width: 170px; height: 170px; margin-left: 50px; }

#output img { height: 170px; width: 170px; float: right; border: 1px solid #ccc; }

.time, .bu { width: 300px; height: 30px; clear: both; text-align: center; line-height: 30px; border: 1px solid #574a4a; margin: 10px auto; border-radius: 4px; }

/style>

jQuery人物拼图游戏代码