快速业务通道

jAni:可以动画显示背景图片的jQuery插件

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06


下载地址
演示地址

简介

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&ndas

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号