小熊维尼拼图
jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块。
html代码
<div id="box-div"> <!--走不通时的提示!--> <div id="tips"> <p>\(╯-╰)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"> <div class="unit"><img src="/UploadFiles/2021-04-02/weini_part_01.png">#box-div { position: relative; width: 508px; height: 631px; margin: 0 auto; } #container { width: 508px; height: 631px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d5e0e6; } #container > .row { display: -webkit-box; white-space: nowrap; } #container > .row > .unit { width: 169px; height: 209px; display: inline-block\9;/*兼容IE9/10*/ vertical-align: top\9;/*兼容IE9/10*/ box-sizing: border-box; border: 1px solid rgba(7, 157, 239, 0); } #container > .row > .unit.move { border: 1px solid rgba(7, 157, 239, 1); } #tips { width: 200px; height: 50px; background: rgb(152, 206, 50); position: absolute; z-index: 5; top: -50px; left: calc(50% - 100px); opacity: 0; } #tips > p { margin: 0; line-height: 50px; text-align: center; color: white; } .directions{ width:50%; margin:0 auto; text-align: center; line-height: 30px; color: white; background-color: #a7cbf0; }jquery代码
$("#container>.row>.unit>img").each(function () { $(this).click(function (event) { event.stopPropagation(); $(".unit").removeClass("move"); $(this).parent(".unit").addClass("move"); }) }); move(".move","#tips"); function move(className,idName) { /* 提示信息 */ function tipsAlert(idName) { $(idName).animate({top: "0", opacity: "1"}, 500); setTimeout(function () { $(idName).animate({top: "-50px", opacity: "0"}, 800); }, 1000) } /* 上下左右按键移动 */ $(document).keydown(function (e) { var code = e.keyCode; if (code > 40 || code < 37) { return false; } 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 { tipsAlert(idName); } break; case 38://上 if (paprev) { var exchangeTop = $(paprev).children()[index]; $(className).insertBefore(exchangeTop); if (movenDiv) { $(exchangeTop).insertBefore(movenDiv); } else { $(exchangeTop).insertAfter(movepDiv) } } else { tipsAlert(idName); } break; case 39://右 if (next) { $(className).insertAfter(next); } else { tipsAlert(idName) } break; case 40://下 if (panext) { var exchangeBottom = $(panext).children()[index]; $(className).insertBefore(exchangeBottom); if (movenDiv) { $(exchangeBottom).insertBefore(movenDiv); } else { $(exchangeBottom).insertAfter(movepDiv) } } else { tipsAlert(idName); } break; } }); }以上这篇jQuery实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]
- 《汽车发烧音乐精选CD18》[FLAC+CUE][7.1G]
- 郑希怡.2004-Perfect.Date【英皇娱乐】【FLAC分轨】
- 群星.1994-宝丽金超级孖宝2CD【宝丽金】【WAV+CUE】
- 林忆莲.2019-0(2023精装版)【环球】【WAV+CUE】
- Supper.Moment.2016-The.Moment【寰亚】【FLAC分轨】
- 范莉丝.1979-送郎一朵牵牛花(LP版)【大联机构】【WAV+CUE】
- 刘宇.2024-宇宙诗人【哔哟哔哟文化】【FLAC分轨】
- 《全景声白噪音》沉浸式大自然助眠 带你听自然的声音[mp3]
- 纯音入心系列纯音乐《古筝精选 十指弹一赏心曲一心奏出世人心》1CD[MP3][582MB]