图片360度旋转---------spritespin.js插件

最新推荐文章于 2024-03-14 11:26:03 发布

weixin_30886233

最新推荐文章于 2024-03-14 11:26:03 发布

阅读量327

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shimily/articles/9999176.html

版权

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
   <script type="text/javascript" src="http://spritespin.ginie.eu/spritespin.js"></script> 
</head>
<body>
  <div id='spritespin'></div>
<button id='prev'>Prev</button>
<button id='toggle'>Toggle</button>
<button id='reverse'>Reverse</button>
<button id='next'>Next</button>
<script type="text/javascript">
  var frames = SpriteSpin.sourceArray('cake-{frame}.jpg', { 
    frame: [1, 4], 
    digits: 3 
  });

var spin = $('#spritespin');
var api;

spin.spritespin({
    source: [                                         //保存所有图片路径的数组

                "cake-1.png",

                "cake-2.png",

                "cake-3.png",

                "cake-4.png"

         ],
    width: 480,
    sense: -1,
    height: 327
});
api = spin.spritespin("api");

$('#prev').click(function(){
    api.stopAnimation();
    api.prevFrame();
});

$('#next').click(function(){
    api.stopAnimation();
    api.nextFrame();
});

$('#toggle').click(function(){
    api.toggleAnimation();
});

$('#reverse').click(function(){
    api.data.reverse = !api.data.reverse;
});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/shimily/articles/9999176.html

weixin_30886233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片360度旋转---------spritespin.js插件

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jq...
复制链接

扫一扫