前沿設計推薦-使用jquery打造動感的浮動web介面分享5個實用的Javascript件動態更新表徵圖外掛程式jquery視差推薦：nikebetterworld視差平滑滾動效果

在前端開發設計當中，我們最關注的是使用者體驗，現在經常看到有些網站使用浮動的小鳥作為元素來回飛，往往第一眼給你的感覺這個是用flash實現的，如果你沒有很高的水平，基本上你是做不出這樣的效果來的，那有沒有一種好的方法來實現呢，今天就分享一下比較時尚的浮動元素是如何?的，點擊氣球，他會跳，點擊蝸牛，他不讓你動，哈哈,

另外有人問我，我網站的載入進度是如何?的，我分享了一下，看這篇文章分享5個實用的Javascript件動態更新表徵圖外掛程式

進一步閱讀

jquery實現的視差滾動教程(視差大背景效果)
jquery視差推薦：nikebetterworld視差平滑滾動效果

這 是一個 jQuery 外掛程式，能夠作出任何 HTML 對象顯示在您的 web 頁上"浮動"。它可以協助建立簡單的浮動動畫並使您的網站活過來用這些小"浮動"的對象。

 ~廢話少說，先看示範,（Firefox和Google瀏覽器瀏覽最佳）我們的老規矩：喜歡源碼的請留下你的郵箱和觀點，

DEMO

在網頁中設定幾個不同的浮動物件，

 

工作原理

 

jqFloat.js 使用 jQuery.animate() 方法無限迴圈進行動畫處理的對象到不同的位置，因此它使對象出現在 web 頁上浮動。它使用 jQuery.data() 方法來儲存和跟蹤每個對象的屬性和狀態。

jqFloat.js 運行在所有的瀏覽器上: IE6 and , Firefox and Webkit browsers.

 

使用方法

1. 在頭部引用jquery檔案，

<script src="jquery.min.js"></script><script src="jqfloat.js"></script>

 

 

 

2. 在任何需要浮動的元素上調用jqfloat()函數

View Code

$(document).ready(function() {   $('object').jqFloat();});

 

 

 在看看超棒的效果

 點擊氣球，他會跳，點擊蝸牛，他不讓你動，哈哈

函數配置:

.jqFloat( [Method] [, Options] )

Method: 用於控制浮動物件。
Options: 配置浮動動畫的數組。

關於 Method

目前只有兩個方法可用：:

Play (or no method specified)
開始浮動的動畫

Stop
開始登陸的動畫.

Options

有幾個選項可以用於配置浮動動畫

width
Type: Int Default: 100 --int類型 預設是100
水平方向的最大浮動距離. 將數值除以2所得的結果定位在左邊和右邊.

height
Type: Int Default: 100int--類型 預設是100
垂直方向的最大浮動. 將數值除以2所得的結果定位在上面和下面.

speed
Type: Int Default: 1000---int類型 預設是1000
最大浮動速度.

minHeight
Type: Int Default: 0
浮動物件從底部/表面的距離

 

具體代碼

 1 $(document).ready(function() { 2    //如果沒有指定方法和選項 3    //浮動元素使用預設的方法 4    $('object').jqFloat(); 5   6    //如果僅僅指定選項 7    //浮動元素按照指定的大小浮動 8    $('object').jqFloat({ 9       width: 300,10       height: 300,11       speed: 10012    });13  14    //停止浮動15    $('object').jFloat('stop');16  17    //開始浮動18    $('object').jFloat('play');19 });

 

 本文連結：前沿設計推薦-使用jquery打造動感的浮動web介面

hide