可将任意图片转换为拼图游戏的jQuery插件
简要教程 jQuery-snapPuzzle是一款非常有趣的可以将任意图片转换为九宫格拼图游戏的jQuery插件。该插件通过jQueryUI来实现图片的拖拽，你可以设置图片的碎片数量来控制游戏的难度。并且它可以兼容IE7+浏览器。它的特点有： 复制代码 复制代码 复制代码 本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Image-Effects/201507262299.html
查看演示 下载插件
- 可以调游戏的整难度级别
- 可以在响应式设计的页面中使用
- 支持拖拽
- 提供游戏成功后的回调函数
使用方法
该图片拼图游戏插件依赖于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 })
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
