SpriteSpin 一款图像360度旋转的jquery插件

在web页面上使用jQuery图像360度旋转插件是最美也是最方便的显示图像的方式。这些超级棒的360°图像选择插件允许用户更详细的分析产品或者文章。jQuery图像旋转插件可以让用户从各种角度进行360度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏。

Spritespin是个jQuery插件,允许在网页上显示sprite动画。只需要用户提供一组图像,或者一系列无缝的sprite列表,就可以逐帧显示这些图像,然后生成动画。SpriteSpin变成图像帧成动画。它需要的图像或stiched精灵表的一个数组,并像一个翻转书帧播放这些帧。这个插件的目的是提供任何一种产品的一个360度的视角。SpriteSpin依赖了jQuery1.4.2框架及更高版本。

<script type="text/javascript">
  $(function(){
    $('.spritespin').spritespin({
      // generate an array of image urls.
      // this is a helper function that takes a {frame} placeholder
      source: SpriteSpin.sourceArray('/images/rad_zoom_{frame}.jpg', {
        // 这里是图片路径
        frame: [1,34],
        // 这里是图片开始到最后一张图片的数量
        digits: 3  //这里有{frame}是3位数字  比如rad_zoom_001.jpg
      }),
      // Specify the display width and height of the frame.
      // Optionally the size of the container can be defined with CSS.
      width: 480,
      height: 327,
      // Sense controls the direction and speed of the animation for mouse/touch interactions.
      // Here a negative value is chosen to invert the rotation, so the animation 'follows' the drag direction.
      // Values towards 0 will slow the animation down.
      sense: -1
    });
  });
</script>
<div class="spritespin"></div>

在线演示:http://spritespin.ginie.eu/

相关推荐