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/
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17