Js_动画显示背景图片

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