DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jAni:可以動畫顯示背景圖片的jQuery插件
jAni:可以動畫顯示背景圖片的jQuery插件
編輯:關於JavaScript     


下載地址
演示地址

簡介

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

轉載請注明:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved