使用jQuery轻松生成滑动拼图游戏——jqPuzzle插件简介
2012-12-31 14:24
831 查看
jqPuzzle 这个jQuery插件可以帮助你在自己的网页上轻松生成滑动拼图游戏。选择一张图片放进你的网页中,然后给它来点小小的魔法——jqPuzzle 会帮你把它变成滑动拼图!你还可以根据自己的喜好对这个拼图进行各种定制。太COOL了!
使用方法相当的简单。首先,像所有jQuery插件一样,在<head> 标签中引用所需要的文件:
[javascript]
view plaincopyprint?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />
[xhtml] view plaincopyprint? <img src="street.jpg" alt="Animals crossing" class="jqPuzzle" /> <img src="street.jpg" alt="Animals crossing" class="jqPuzzle" />
进行过上面的两步之后,您应该可以看到您的拼图了。当然如果愿意,这个插件还有一些选项,允许您对这个拼图进行定制。使用语法如下:
jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]
把所有大写字母的单词变成您需要的值即可。另外,中括号[ ]中的部分都是可选的(包括中括号)。具体解释如下:
* LANGUAGE: 界面语言代码。默认是英文。
* ROWS: 拼图的行数 (从 3 到 9)。
* COLS: 拼图的列数 (从3 到 9)。
* HOLE: 拼图中“图眼”的位置(即缺的那一块的位置) (从 1 到 rows*columns), 默认是缺最右下角那块。
* SHUFFLE ROUNDS: 把原图进行多少次打乱。默认是 3 次
* FLAGS: 其它选项。您想用多少,就摆上多少,次序无所谓:
o S: 把拼图的初始状态设为已被打乱。
o N: 隐藏拼图上的数字。
o A: 隐藏 'Shuffle' 按钮。
o B: 隐藏 'Original' 按钮。
o C: 隐藏 'Numbers' 按钮。
o D: 隐藏 'moves' 移动步数。
o E: 隐藏 'seconds' 游戏时间。
下面是一些例子:
三行五列,图眼在5的位置:
[xhtml]
view plaincopyprint?
<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r3-c5-h5" />
[xhtml] view plaincopyprint? <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c5" /> <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c5" />
四行四列,打乱一次:
[xhtml]
view plaincopyprint?
<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-r4-c4-s1" />
[xhtml] view plaincopyprint? <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" /> <img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" />
德语界面,五行七列,初始拼图是打乱状态,隐藏“shuffle”按钮和游戏时间:
[xhtml]
view plaincopyprint?
<img src="street.jpg" alt="Animals crossing" class="jqPuzzle jqp-de-r5-c7-SAE" />
[xhtml] view plaincopyprint? <script type="text/javascript"> $(document).ready(function() { $('img').jqPuzzle(); // apply to all images }); </script> <script type="text/javascript"> $(document).ready(function() { $('img').jqPuzzle(); // apply to all images }); </script>
使用这种方式,您可以对jqPuzzle这个插件的所有功能进行控制。
至于jqPuzzle()这个方法,可以带两个可选的参数:
jqPuzzle(settings, texts)
其中 setting 这个参数的默认值定义如下:
[javascript]
view plaincopyprint?
var settings = {
rows: 4, // 行数 [3 ... 9]
cols: 4, // 列数 [3 ... 9]
hole: 16, // 图眼位置 [1 ... rows*columns]
shuffle: false, // 初始状态打乱图片 [true|false]
numbers: true, // 在拼图上显示数字 [true|false]
language: 'en', // 用户界面代码 [language code]
// display additional gui controls
control: {
shufflePieces: true, // 显示 'Shuffle' 按钮[true|false]
confirmShuffle: true, // 打乱之前询问 [true|false]
toggleOriginal: true, // 显示 'Original' 按钮 [true|false]
toggleNumbers: true, // 显示 'Numbers' 按钮[true|false]
counter: true, // 显示移动步数 [true|false]
timer: true, // 显示计时器 [true|false]
pauseTimer: true // 按下 'Original' 按钮时暂停计数器
// [true|false]
},
// perform actions when the puzzle is solved sucessfully
success: {
fadeOriginal: false, // 原始图像交错淡变 [true|false]
callback: undefined, // 回调用户自定义函数 [function]
callbackTimeout: 300 // 回调函数被调用Timeout(单位:毫秒)
},
// animation speeds and settings
animation: {
shuffleRounds: 3, // 打乱次数 [1 ... ]
shuffleSpeed: 800, // 每次打乱所用的时间 (单位:毫秒)
slidingSpeed: 200, // 单次移动所用的时间 (单位:毫秒)
fadeOriginalSpeed: 600 // 原始图像交错淡变所用的时间 (单位:毫秒)
},
// additional style information not specified via css
style: {
gridSize: 2, // 2块拼图之间的间距
overlap: true, // 如果为 true, 相邻两块拼图的边界重叠(仅当gridSize为0时有效)
backgroundOpacity: 0.1 // 原始图像的透明度
// [0 ... 1] (0 意为不显示原始图像)
}
}
[javascript] view plaincopyprint? $(document).ready(function() { // 定制您自己的 settings 参数 var mySettings = { cols: 5, hole: 11, numbers: false, control: { toggleNumbers: false, counter: false, timer: false }, animation: { shuffleRounds: 1, slidingSpeed: 100, shuffleSpeed: 200 } }; $('#myImage').jqPuzzle(mySettings); $(document).ready(function() { // 定制您自己的 settings 参数 var mySettings = { cols: 5, hole: 11, numbers: false, control: { toggleNumbers: false, counter: false, timer: false }, animation: { shuffleRounds: 1, slidingSpeed: 100, shuffleSpeed: 200 } }; $('#myImage').jqPuzzle(mySettings);
第二个参数 texts 的作用一目了然,就是定义界面上所有的文字内容:
[javascript]
view plaincopyprint?
var texts = {
shuffleLabel: 'Shuffle',
toggleOriginalLabel: 'Original',
toggleNumbersLabel: 'Numbers',
confirmShuffleMessage: 'Do you really want to shuffle?',
movesLabel: 'moves',
secondsLabel: 'seconds'
}
var texts = {
shuffleLabel: 'Shuffle',
toggleOriginalLabel: 'Original',
toggleNumbersLabel: 'Numbers',
confirmShuffleMessage: 'Do you really want to shuffle?',
movesLabel: 'moves',
secondsLabel: 'seconds'
}
此外,这个插件还支持使用CSS文件进行外观样式的修改。我就偷个懒不写了,您自己看看吧。当然最好的学习方法就是先看看演示,再下载这个插件,亲自动手修改各个参数观察变化:
演示网址:http://www.2meter3.de/jqPuzzle/demos.html
下载网址:http://download.csdn.net/source/2063938
相关文章推荐
- 使用jQuery轻松生成滑动拼图游戏——jqPuzzle插件简介
- 使用jQuery插件qrcode生成二维码
- jQuery布局插件UI Layout简介及使用方法
- jQuery 图表插件 jqChart 使用绘制雷达图
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
- jquery递归遍历xml文件,形成ul-li序列,生成树结构(使用了treeview插件)
- 使用jquery插件qrcode生成二维码
- 使用jQuery的Scrollify插件实现鼠标滚轮或者手势滑动到页面下一节点部分
- 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
- 使用jquery.qrcode.js生成二维码插件
- 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
- jQuery FlexSlider滑动插件的使用
- 使用jquery.qrcode.js生成二维码插件
- 【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope
- jQuery布局插件UI Layout简介及使用方法
- jQuery布局插件UI Layout简介及使用方法
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- jQuery LigerUI 插件 ligerTree 使用与简介
- 使用jQuery插件轻松实现动态流动的网页布局