下載地址
演示地址
jAni是一個可以動畫顯示背景圖片的jQuery插件。這個插件基本上是GIF動畫的一個替代品,但是他有他的好處。所有浏覽器都支持GIF形式的動畫格式,而且也不需要額外的javaScript代碼和標記。但是不好的一點是,GIF格式的圖片只有256色。而且你不能控制圖片的顯示。這個插件通過載入垂直的GIF幀,然後改變容器的background-postion來顯示動畫,這樣你就可以自由控制了。
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()方法接受下面的幾個參數:
轉載請注明: