转载

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

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

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

查看演示       下载插件

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

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

使用方法

该图片拼图游戏插件依赖于jQueryUI,在使用时需要引入jQuery,jQueryUI和jquery.snap-puzzle.min.js文件。
  1. <script src="js/jquery.min.js"></script>
  2. <script src="js/jquery-ui.min.js"></script>
  3. <script src="js/jquery.snap-puzzle.js"></script>            
复制代码

调用插件

在页面DOM元素加载完毕之后,你可以在任何图片上调用snapPuzzle()方法来初始化该拼图游戏插件。
  1. $(selector).snapPuzzle({key1: value1, key2: value2});            
复制代码

配置参数

该拼图游戏插件接收键值对对象作为参数,下面是可用的配置参数。
  • pile:默认值:null。图片碎片容器的选择器。
  • containment:默认值:'document'。限制图片碎片在某个元素中。
  • rows:默认值:5。图片碎片的行数。
  • columns:默认值:5。图片碎片的列数。
  • onComplete(elem):当拼图游戏成功完成之后的回调函数。

应用举例

  1. $('img.puzzle').snapPuzzle({ rows: 4, columns: 3 })               
复制代码
本文版权属于jQuery之家,转载请注明出处: http://www.htmleaf.com/jQuery/Image-Effects/201507262299.html
正文到此结束
Loading...