jquery图片移动查看插件

jquery.kinetic是一款jquery图片移动查看插件。jquery.kinetic插件可以为容器中的图片提供平滑移动的功能，它支持桌面鼠标，也支持移动触摸设备。适合用于超大图片的查看和预览。

安装

可以通过bower和npm来安装jquery.kinetic插件。

bower install jquery.kinetic --save
npm install 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 scrolling
  threshold: 0,

  // 左右移动
  y: true,
  x: true,

  // 移动速度
  slowdown: 0.9,

  // 最大移动
  maxvelocity: 40,

  // FPS
  throttleFPS: 60,

  // inverts movement direction
  invert: false,

  // default CSS classes
  movingClass: {
    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'
  }

});
                

jquery.kinetic插件的github地址为：https://github.com/davetayls/jquery.kinetic

相关插件

js弹出层Lightbox图片画廊插件spotlight.js

带网格图片预览的横向拖动式菜单布局

js和CSS3可拖拽的横向图片预览布局

纯js实现360度旋转预览图片特效