产品图片拖拽3d查看js插件

animate-sprite.js是一个3d交互式图像查看器,从各个角度查看产品细节。

默认配置参数

var sprite = animateSprite.init(element,
    {
      width: 100,
      height: 100,
      frames: 24,
      cols: false,
      loop: false,
      frameTime: false, // time between frames
      duration: false,
      fps: 24,
      reverse: false, // reverse direction
      autoplay: false,
      draggable: false
    }
);

或者在HTML里添加属性

<div id="sprite-example" 
     class="sprite sprite-example"
     data-width="600"
     data-heigth="450"
     data-frames="36">
</div>

一些API方法

// 初始化
sprite.init(element, options);
// 播放
sprite.play();
// 暂停
sprite.pause();
// 停止
sprite.stop();
// 切换
sprite.toggle();
// 下一个
sprite.next();
// 上一个
sprite.prev();
// 重置
sprite.reset();
// 销毁
sprite.destroy();
// 直接定位到一个角度
sprite.setFrame(frameIndex);
// 相反的动画
sprite.setReverse(true/false);
// 更新配置
sprite.setOption(option, value);
// 获取当前
sprite.getCurrentFrame();