图片/图形
kinetic 图片移动查看jQuery插件
PetitQ
jquery.kinetic 是一款 jquery 图片移动查看插件。jquery.kinetic 插件可以为容器中的图片提供平滑移动的功能，它支持桌面鼠标，也支持移动触摸设备。适合用于超大图片的查看和预览。
使用方法
在页面中引入 jquery 和 jquery.kinetic.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.kinetic.js"></script>
HTML 结构
使用 jquery.kinetic 插件最基本的 HTML 结构如下：
<div id="wrapper">
<div id="inner">
<img src="big.jpg">
</div>
</div>
初始化插件
在页面 DOM 元素加载完毕之后，可以通过 kinetic()方法来初始化该插件。
$('#wrapper').kinetic();
配置参数
jquery.kinetic 插件的可用配置参数如下：
$('#wrapper').kinetic({
// 鼠标样式cursor: 'move',
// 是否可以减速decelerate: true,
// 在iOS中是否使用硬件加速triggerHardware: false,
// the number of pixels the mouse needs to move before the element starts scrollingthreshold: 0,
// 左右移动y: true,
x: true,
// 移动速度slowdown: 0.9,
// 最大移动maxvelocity: 40,
// FPSthrottleFPS: 60,
// inverts movement directioninvert: false,
// default CSS classesmovingClass: {
up: 'kinetic-moving-up',
down: 'kinetic-moving-down',
left: 'kinetic-moving-left',
right: 'kinetic-moving-right'
},
deceleratingClass: {
up: 'kinetic-decelerating-up',
down: 'kinetic-decelerating-down',
left: 'kinetic-decelerating-left',
right: 'kinetic-decelerating-right'
}});
Github 地址：https://github.com/davetayls/jquery.kinetic
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
