| 文章简介：jAni是一个可以动画显示背景图片的jQuery插件。这个插件基本上是GIF动画的一个替代品，但是他有他的好处。所有浏览器都支持GIF形式的动画格式，而且也不需要额外的javaScript代码和标记。但是不好的一点是，GIF格式的图片只有256色。而且你不能控制图片的显示。这个插件 |
下载地址
演示地址
简介
jAni是一个可以动画显示背景图片的jQuery插件。这个插件基本上是GIF动画的一个替代品，但是他有他的好处。所有浏览器都支持GIF形式的动画格式，而且也不需要额外的javaScript代码和标记。但是不好的一点是，GIF格式的图片只有256色。而且你不能控制图片的显示。这个插件通过载入垂直的GIF帧，然后改变容器的background-postion来显示动画，这样你就可以自由控制了。
特色
- 轻量级的脚本
- 很容易使用
- 可以通过CSS完全定制
- 所有浏览器都支持
如何使用
1、下载脚本，并包含jquery框架。
2、添加下面的代码到head标签中：
1 2 |
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jani.js"></script> |
3、在CSS中添加相应的样式，图片地址：
1 2 3 4 5 |
<style type="text/css">
.animation-1
{
background:
url(./images/sample-animation.gif)
no-repeat
left
top;
}
</style>
|
4、在页面中添加一个显示动画的容器：
1 |
<div id="animation-1"></div> |
5、在head标签中添加下面的代码：
1 2 3 4 5 6 |
<script type="text/javascript">
$(document).ready(function(){
$("#animation-1").jani({ frameWidth:
100, frameHeight:
100, speed:
100, totalFrames:
19
});
$("#animation-1").jani.play();
});
</script>
|
jAni的方法
- jani.play();开启动画
- jani.pause();暂停动画
- jani.stop();终止动画
参数
.jani()方法接受下面的几个参数：
- frameWidth：frame的宽度
- frameHeight ：单独框架的高度
- speed：动画速度
- totalFrames：frame的数量
- loop：是否循环动画，默认为true
转载请注明：
作者：RockUX–WEB前端
出自：jAni-动画显示背景图片的jQuery插件
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索背景图片
， 图片
， 插件
， 动画
， 代码
， 图片htmlwebview手机动画
， 一个
， jquery动画
， Jquery简介
， 显示插件
图片动画
，以便于您获取更多的相关知识。