码迷,mamicode.com
首页 > Web开发 > 详细

jQuery拼图小游戏

时间:2018-08-17 16:26:59      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:image   部分   col   fun   rip   小游戏   .com   appendto   bsp   

          jQuery拼图小游戏

最后样式 

 

技术分享图片

 

 

 

核心代码部分

技术分享图片

 

 

<script type="text/javascript" >

  $(function () {

    $("td").click(function () {

      //获取点击的图片的id
      id = parseInt($(this).prop("id"));
  
      //向下
      if (id + 3 < 10 && $("td[id=" + (id + 3) + "]").children().length==0)
      {
        $(this).find("img").appendTo($("td[id=" + (id + 3) + "]"));
      }

      //向上
      if (id - 3 > 0 && $("td[id=" + (id - 3) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id - 3) + "]"));
      }

      //向左
      if (id % 3 != 1 && $("td[id=" + (id -1) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id -1) + "]"));
      }

      //向右
      if (id % 3 != 0 && $("td[id=" + (id + 1) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id + 1) + "]"));
      }
    })
  })
</script>

body部分

技术分享图片

 

jQuery拼图小游戏

标签:image   部分   col   fun   rip   小游戏   .com   appendto   bsp   

原文地址:https://www.cnblogs.com/loushengjie/p/9493648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!