jQuery实现拼图小游戏（实例讲解)

小熊维尼拼图

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

超文本标记语言代码

div id='box-div '！-走不通时的提示！-div id=tips p\(-)/哎呦，走不通啦！/p/div div id=' container ' div class=' row ' div class=' unit ' img src=' http :3358 yn 321。cn3v。网络/图片/倪伟_零件_ 01。png ' alt=' photo 1 '/div class=' unit ' img src=' http :http://yn 321。cn3v。网络/图片/倪伟_ part _ 02。gif ' alt=' photo 2 '/div class='宽度： 508像素；高： 631 pxmargin 3360 0 auto } #容器{ width : 508 pxh three : 631 pxmargin 3360 0 auto-web kit-box-sizing :边框-盒子；-moz-box-siz :边框盒；盒子尺寸：边框盒子；border: 1px固体# d5e0e6} #容器row { display :-web套件-box；空白： nowrap} #容器。划船。单位{ width : 169 px h8 : 209 pxdisplay :内联块\ 9;/*兼容IE9/10*/垂直对齐：顶部\ 9;/*兼容IE9/10*/盒尺寸：边框-盒子；border: 1px固体rgba(7，157，239，0)；} #容器划。单位。move { border : 1px solid rgba(7，157，239，1)；} # tips { width: 200px高度： 50px背景： rgb(152，206，50)；绝对位置：z指数： 5；top :-50px；左侧： calc(50%-100 px)；opa城市3360 0；} # tips p { margin : 0；线高： 50px文本对齐：中心；颜色：白色；}.方向{横向：50%;margin:0汽车文本对齐：中心；线高： 30px颜色：白色；背景-颜色： # a7 CBF 0；}jquery代码

$('#container.row.unitimg ').每个（函数(){ $(此)).点击(功能(事件){事件。stopperpagation()；$('.单位')。移除CLaSS(' move ')；$(这个)。父代('。单位')。添加CLaSS(' move ')；})});移动('。移动，' # tips ')；函数移动（类名，idName) { /*提示信息*/函数tipsAlert(idName) { $(idName).animate({top: '0 '，opacity: ' 1 ' }，500)；setTimeout(函数(){ $(idName)).animate({top: '-50px '，opacity: ' 0 ' }，800)；}, 1000) } /* 上下左右按键移动*/$(文档)。向下键(函数(e){ var代码=e . key代码；如果(代码40 ||代码37){返回false} var prev=$(类名)[0].previousElementSibling//选中元素前置位元素是否存在，以此判断元素是否还可以左右移动var next=$(类名)[0].nextElementSibling//选中元素后置位元素是否存在，以此判断元素是否还可以左右移动var paprev=$(类名).parent()[0].previousElementSibling//选中元素父级前置位元素是否存在，以此判断元素是否还可以上下移动var panext=$(类名).parent()[0].nextElementSibling//选中元素父级后置位元素是否存在，以此判断元素是否还可以上下移动var索引=$(类名)。index()；//根据选中元素的索引值，来确定上下移动时对换的位置var movenDiv=$(类名)。next()[0]；//以此确定上下对换元素添加方式var movepDiv=$(类名)。prev()[0]；//以此确定上下对换元素添加方式开关（代码){ case 37://左if (prev) { $(类名).insertBefore(前一个);} else { Tiptalert(IdName)；}休息案例38://上if(paprev){ var Exchange ToP=$(paprev).children()[index]；$(类名)。在(Exchange ToP)之前插入；if (movenDiv) { $(exchangeTop).在(movenDiv)之前插入；} else { $(exchangeTop).insertAfter(move pdiv)} } else { Tiptalert(IdName)；}休息第39://右if (next) { $(className).insertAfter(下一个);} else { Tiptalert(IdName)} break；第40://下if(窗格XT){ var ExchangeBottom=$(窗格XT).children()[index]；$(类名)。在(ExchangeBottom)之前插入；if (movenDiv) { $(exchangeBottom).在(movenDiv)之前插入；} else { $(exchangeBottom).insertAfter(move pdiv)} } else { Tiptalert(IdName)；} break } })；}以上这篇jQuery实现拼图小游戏（实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。