可将任意图片转换为拼图游戏的jQuery插件

当前位置:主页 > jQuery库 > 图片效果 > 可将任意图片转换为拼图游戏的jQuery插件
可将任意图片转换为拼图游戏的jQuery插件
分享:

    插件介绍

    jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的jQuery插件。该插件通过jQueryUI来实现图片的拖拽,你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-26
    阅读:
简要教程

jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的jQuery插件。该插件通过jQueryUI来实现图片的拖拽,你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。它的特点有:

  • 可以调游戏的整难度级别
  • 可以在响应式设计的页面中使用
  • 支持拖拽
  • 提供游戏成功后的回调函数

拼图游戏

使用方法

该图片拼图游戏插件依赖于jQueryUI,在使用时需要引入jQuery,jQueryUI和jquery.snap-puzzle.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.snap-puzzle.js"></script>             
              
调用插件

在页面DOM元素加载完毕之后,你可以在任何图片上调用snapPuzzle()方法来初始化该拼图游戏插件。

$(selector).snapPuzzle({key1: value1, key2: value2});                
              

配置参数

该拼图游戏插件接收键值对对象作为参数,下面是可用的配置参数。

  • pile:默认值:null。图片碎片容器的选择器。
  • containment:默认值:'document'。限制图片碎片在某个元素中。
  • rows:默认值:5。图片碎片的行数。
  • columns:默认值:5。图片碎片的列数。
  • onComplete(elem):当拼图游戏成功完成之后的回调函数。

应用举例

$('img.puzzle').snapPuzzle({ rows: 4, columns: 3 })