jQuery实现拼图板效果

界面展示

需求解析

拼图板的主要功能就是点击空白旁边的图片，旁边的图片就移动到空白的位置上，于是我们就可以利用需求想出很多实现方法
1.使用img标记或者background-image属性来设置h5页面
2.运用jQuery遍历判断点击部位周围的图片空缺状况
3.使用jQuery方法移动标记或者添加删除属性

算法实现

话不读说，h5页面走起

<body><header><div id="gameOptions"><input type="button" value="开始游戏" id="starGame"><input type="button" value="暂停游戏" id="pauseGame"></div><div id="gameRecord"><div>你的点击次数：<span id="clickTimesText"></span></div></div><table><tr><td id="p1"><div class="img" style="background-image:url(p1.png)"></div></td><td id="p2"><div class="img" style="background-image:url(p2.png)"></div></td><td id="p3"></td></tr><tr><td id="p4"><div class="img" style="background-image:url(p4.png)"></div></td><td id="p5"><div class="img" style="background-image:url(p5.png)"></div></td><td id="p6"><div class="img" style="background-image:url(p6.png)"></div></td></tr><tr><td id="p7"><div class="img" style="background-image:url(p7.png)"></div></td><td id="p8"><div class="img" style="background-image:url(p8.png)"></div></td><td id="p9"><div class="img" style="background-image:url(p9.png)"></div></td></tr></table></header>
</body>

在这里，我才用table标记的方式，在里面插入div标记，并设置background-image属性
jQuery代码：

 <script type="text/javascript">$(document).ready(function(e) {//实现图片交换的关键数据var switchNumber = [[2,4,0,0], //p1[1,3,5,0], //p2[2,6,0,0], //p3[1,5,7,0], //p4[2,4,6,8], //p5[3,5,9,0], //p6[4,8,0,0], //p7[5,7,9,0], //p8[6,8,0,0], //p9];//记录点击次数var clickTimes = 0;$("table").click(function (){++clickTimes;$("#clickTimesText").text(clickTimes);});//关键之关键交换代码$("td").click(function (){if($(this).html()!=""){var indexOne = parseInt($(this).attr('id').charAt(1))-1;for (var i = 0; i <= 3; i++) {if(switchNumber[indexOne][i]==0)break;if($("#p"+switchNumber[indexOne][i]).html()==""){                            $($(this).html()).prependTo("#p"+switchNumber[indexOne][i]);$(this).html("");}}}});});</script>

cs代码我写的不是很好：

<style type="text/css">div{margin: 0;padding: 0;}table{margin: 0 auto;border-collapse:collapse;}.img{height: 190px;width: 190px;}td{border: 2px solid white;text-align: center;}#gameOptions{float: left;width: 290px;height: 570px;border: 5px solid rgb(148,221,251);border-radius: 8px;background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);text-align: center;}#gameOptions>input[type=button]{margin: 20px 18px 20px 18px;display:block;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);color: black;padding: 15px 32px;text-align: center;font-size:45px;border: 5px solid white;border-radius: 10px;}#gameRecord{float: right;width: 300px;border: 1px solid black;}header{width: 1220px;margin: 0 auto;padding: 0 10px 0 10px;}
</style>

代码解释

在我的jQuery代码中，我运用了一个数组来把交换的关键数据存了进去，拿数组的第一行来说

 [2,4,0,0]

表示，点击P1时，告诉计算机查找P2、P4是否有空白，因为P1的周围是P2和P4，如果有空白，就交换，如果我们数组中的数据等于0，我停止查找，以此类推。
之所以用数组的方法，就是因为反复地遍历查找太过于浪费内存，使查找效率变低，一方面数据本身就很少，另一方面每个点击图片块的规律都是固定的。
我们可以看到，我运用的是prependTo()方法移动td中的div标记

jQuery实现拼图板效果相关推荐

使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
jQuery 图片滚动效果
2019独角兽企业重金招聘Python工程师标准>>> 使用了网上的一个JS插件,配置起来相当灵活好用,效果如下: 下面整理下使用的过程: 1.在插件网站http://www.gma ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
JQuery绑定及效果
JQuery绑定及效果文章目录 JQuery绑定及效果一.JQuery的四种事件绑定 1.bind(type,[data],function(eventObject)) 2.live(type, ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: Java代码 <!DOCTYPE html> <html> <head lang=&quo ...
php jquery进度条,如何实现jQuery进度条效果
通过jQMeter.js插件可以简单的实现jQuery进度条效果,并且可以自定义它的样式实现jQuery进度条效果需要外部引入一个jQuery插件jQMeter.js.它是一款简单实用的轻量级进度条 ...

jQuery实现拼图板效果

jQuery实现拼图板效果

界面展示

需求解析

算法实现

代码解释

jQuery实现拼图板效果相关推荐

最新文章

热门文章