web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
animateSprite-可控制雪碧图(sprites)动画的jQuery插件
分类:
动画效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
可以通过npm或bower来安装animateSprite插件。 bower install animatesprite ##### 使用方法 使用该插件需要引入jQuery和jquery.animateSprite.js文件。 ```html ``` ##### HTML结构 可以使用一个div元素来作为雪碧图的容器。 ```html
``` ##### CSS样式 将雪碧图作为容器的背景图像,并为容器设置合适的高度和宽度。 ```html .animation-2 { background: url(../img/ramonaflowers_multiple.png); width: 125px; height: 157px; } ``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该jQuery插件。 ```html $('.animation').animateSprite({ fps: 12, loop: true, animations: { walk: [0, 1, 2, 3, 4, 5, 6, 7, 8], run: [14, 13, 12, 11, 10, 9] }, complete: function(){ alert('Sprite animation complete!'); } }) ``` ##### 配置参数 - columns:雪碧图分为多少列,默认为10。 - fps:定义动画的速度。 - duration:动画的持续时间,单位毫秒。 - complete:动画执行完毕之后的回调函数。(如果是无限循环动画不会被调用) - loop:是否是无限循环动画 - autoplay:是否自动播放。 - animations:包含多个动画的键值对对象。键是动画的名称,值是一个包含帧的数组。 ##### 方法 play:播放指定的动画。 ```html $('object').animateSprite('play', 'animation name') ``` stop:停止播放指定的动画。 ```html $('object').animateSprite('stop') ``` resume:恢复动画的播放。 ```html $('object').animateSprite('resume') ``` restart:重新开始播放动画。 ```html $('object').animateSprite('restart') ``` frame:播放第n帧动画。 ```html $('object').animateSprite('frame', n) ``` fps:将动画的速度调整为n帧每秒。 ```html $('object').animateSprite('fps', n) ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告