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