jQuery 側欄與工具提示 20130726

2021-09-01 19:02:03 字數 784 閱讀 4867

1、效果及功能說明

當滑鼠觸及到標題就會觸發乙個側顯示框來告訴基礎資訊

2、實現原理

主要是靠偽類來觸發效果,當提示框從左邊出來,讓後顯示出上面的資訊,獲得乙個定義好的類來修改上面的字型等資訊,當滑鼠離開後自動回去,並且刪除類,當滑鼠觸及到時多有動畫停止,確保了不會有重複的出現

主要的方法

$(this).find("div").stop().animate(, "fast").css("display","block");

$(this).find(">a").addclass("current");

//當提示框從左邊出來,和新增類來修改提示框內部的資訊樣式

$(this).find("div").stop().animate(, "fast");

$(this).find(">a").removeclass("current");

//當滑鼠離開後**提示框,並且消除掉類較少頁面的負擔

3、效果圖

[img]

4、執行環境

ie6 ie7 ie8及以上 firefox 和 google chrome遊覽器下都可實現

6、將建立html檔案儲存的時候將編碼型別換成(utf-8有簽名)這樣可以讓部分中文正常的顯示出來,將儲存型別(t)換成(所有檔案(*.*)),將html5和解壓後的資料夾放在同乙個資料夾內效果

7、**[html5]

jQuery資訊提示工具 Poshy Tip

poshy tip是一款非常友好的資訊提示工具,它基於jquery,當滑鼠滑向鏈結時,會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料,該外掛程式還提供了很多屬性和方法。檢視演示demo xhtml demo中提供了三種使用的例子,頁面 如下 1 id tip1 t...

jQuery資訊提示工具Poshy Tip

poshy tip是一款非常友好的資訊提示工具,它基於jquery,當滑鼠滑向鏈結時,會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料,該外掛程式還提供了很多屬性和方法。如下提供了三種使用的例子,如下 1.滑鼠滑上這裡看看 2.使用者名稱 3.服務端呼叫 滑鼠滑向這...

VC 新增與顯示工具欄提示資訊

由 cwnd enabletooltips 為視窗提供的預設工具提示並不包含與視窗關聯的文字。為檢索要顯示的工具提示文字,在即將顯示工具提示視窗之前,ttn needtext 通知被傳送到工具提示 tooltip 控制項的父視窗。新增工具提示的具體步驟如下 1.在類 如對話方塊 的.h標頭檔案中 b...