DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 雅虎、網易ajax標簽導航效果實現
雅虎、網易ajax標簽導航效果實現
編輯:AJAX詳解     

經過多次改進,可以在普通網站上直接使用了,現在發布源程序下載(編碼為utf-8,改為gb3212的方法是:用記事本打開,另存時選擇相應的編碼),希望對大家有用(雖然不一定實用)。
因為只是標簽導航,所有內容還會在頻道頁中體現,所在全部用AJax讀取。

功能的實現思路

雅虎中國

  • 單擊觸發
  • <A>塊鎖定:a{display:block;height:16px;}/*將A鎖定為塊級,再定義高度和寬度*/
  • 再次單擊彈出鏈接:在<A>標記的onclick事件中需要執行讀取時,return false;否則return true;
  • AJax讀取數據
  • 數據暫存
  • 窗口平滑收縮

<!--由於我看不懂雅虎的代碼,所以使用了一些基本的代碼去實現這些功能,可能效率不高,不過效果是出來了.-->

網易

  • 鼠標滑過延時觸發: onmouseover時var waitInterval=window.setTimeout("func();",300);onmouSEOut時clearTimeout(waitInterval);
  • <A>塊鎖定、AJax讀取數據、數據暫存、窗口平滑收縮

其它功能:

  • cookIE記憶
  • 最後讀取數據的服務器時間
  • 滑動門技術

在線效果:
http://www.lorlo.com/tab.Html

源碼下載:點擊這裡下載源文件

JS文件分析:

代碼拷貝框

[Ctrl+A 全部選擇 然後拷貝]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved