jQuery人物拼图游戏代码
1、新建html文档。
2、准备好需要用到的图标。
3、书写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="开始新游戏">
4、书写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>
5、书写并添加js代码。
<script src="js/jquery.min.js"></script>
6、代码整体结构。
7、查看效果。
