完全免费微信小程序_jQuery完成拼图小游戏(实例说

2021-01-11 15:53

jQuery实现拼图小游戏(实例讲解)     投稿:jingxian   下面小编就为大家带来一篇jQuery实现拼图小游戏(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

小熊维尼拼图

jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块。

html代码

 div id="box-div" 
 !--走不通时的提示!-- 
 div id="ti凡科抠图" 
 p \(╯-╰)/ 哎呦,走不通啦! /p 
 /div 
 div id="container" 
 div 
 div img src="images/weini_part_01.png" alt="photo1"/ /div 
 div img src="images/weini_part_02.gif" alt="photo2"/ /div 
 div img src="images/weini_part_03.gif" alt="photo3"/ /div 
 /div 
 div 
 div img src="images/weini_part_04.gif" alt="photo4"/ /div 
 div img src="images/weini_part_05.gif" alt="photo5"/ /div 
 div img src="images/weini_part_06.gif" alt="photo6"/ /div 
 /div 
 div 
 div img src="images/weini_part_07.gif" alt="photo7"/ /div 
 div img src="images/weini_part_08.gif" alt="photo8"/ /div 
 div img src="images/weini_part_09.gif" alt="photo9"/ /div 
 /div 
 /div 
 /div

var prev = $(className)[0].previousElementSibling;//选中元素前置位元素是否存在,以此判断元素是否还可以左右移动 var next = $(className)[0].nextElementSibling;//选中元素后置位元素是否存在,以此判断元素是否还可以左右移动 var paprev = $(className).parent()[0].previousElementSibling;//选中元素父级前置位元素是否存在,以此判断元素是否还可以上下移动 var panext = $(className).parent()[0].nextElementSibling;//选中元素父级后置位元素是否存在,以此判断元素是否还可以上下移动 var index = $(className).index();//根据选中元素的索引值,来确定上下移动时对换的位置 var movenDiv = $(className).next()[0];//以此确定上下对换元素添加方式 var movepDiv = $(className).prev()[0];//以此确定上下对换元素添加方式 switch (code) { case 37://左 if (prev) { $(className).insertBefore(prev); } else { ti凡科抠图Alert(idName); break; case 38://上 if (paprev) { var exchangeTop = $(paprev).children()[index]; $(className).insertBefore(exchangeTop); if (movenDiv) { $(exchangeTop).insertBefore(movenDiv); } else { $(exchangeTop).insertAfter(movepDiv) } else { ti凡科抠图Alert(idName); break; case 39://右 if (next) { $(className).insertAfter(next); } else { ti凡科抠图Alert(idName) break; case 40://下 if (panext) { var exchangeBottom = $(panext).children()[index]; $(className).insertBefore(exchangeBottom); if (movenDiv) { $(exchangeBottom).insertBefore(movenDiv); } else { $(exchangeBottom).insertAfter(movepDiv) } else { ti凡科抠图Alert(idName); break;

以上这篇jQuery实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888