文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> jAni:可以动画显示背景图片的jQuery插件

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


作者: 佚名 来源:网络 浏览:7 日期:2011-6-23 19:31:47

网页制作Webjx文章简介: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插件


上一篇:ControlJS优化阿里妈妈广告提高页面脚本的加载速度 下一篇:Web设计师的路:自学网页设计的有用资源
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

制作Web电子表格的j..

国内外最全面和主流的J..

SVG/VML+JS实..

提高Textarea操..

javascr..

jQuery实现网页精..

jQuery教程:14..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号