前沿設計推薦-使用jquery打造動感的浮動web界面

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

另外有人問我，我網站的加載進度是如何實現的，我分享了一下，看這篇文章分享5個實用的Javascript件動態更新圖標插件

進一步閱讀

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

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

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

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()函數

$(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
浮動對象從底部/表面的距離

 

具體代碼

---

$(document).ready(function() {
   //如果沒有指定方法和選項
   //浮動元素使用默認的方法
   $('object').jqFloat();
 
   //如果僅僅指定選項
   //浮動元素按照指定的大小浮動
   $('object').jqFloat({
      width: 300,
      height: 300,
      speed: 100
   });
 
   //停止浮動
   $('object').jFloat('stop');
 
   //開始浮動
   $('object').jFloat('play');
});

 

 本文鏈接：前沿設計推薦-使用jquery打造動感的浮動web界面

hide