jqFloat.js 實際執行畫面

jqFloat.js 是一個可以讓您的 HTTML 網頁元素似乎是 " 浮 " 在你的頁面上，他可以幫助您創建簡單的浮動動畫效果，讓您的網站有很多的小動畫進行。 jqFloat.js 採用 jQuery 框架製作能夠增加更多的套件來使用。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//jqFloat.js 的主程式碼
<script src="jqfloat.min.js"></script>

第二步 在這裡示範一朵小雲左右飄先做HTML部分
直接也把 CSS 設計的樣式寫上
<div id="cloud1" class="cloud" style="width:104px;height:66px;background:url(sprite.png) no-repeat 0 0;position:absolute;z-index:10;"></div>

第三步 寫上讓雲有在飄的感覺
$(function() {
$('#cloud1').jqFloat({
width: 100,
height: 100,
speed: 1000
});
});

附上程式的方法與參數，使用方法為 .jqFloat([方法][,參數])
方法

方法	參數
play	開始慢慢浮動
stop	停止漂浮

參數

參數	型態	預設	說明
width	整數	100	最高水平浮動.該值將除以2追加到左右對象
height	整數	100	最大垂直浮動.該值將除以2追加到上下對象
speed	整數	1000	最大浮動速度.以毫秒為單位
minHeight	整數	0	浮動最小距離

作者網站：http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/
檔案大小：195 KB(包含範例)
檔案下載：http://inwebson.com/demo/download/jqfloat.zip
檔案備份：下載