雅虎、网易ajax标签导航效果的实现
1 T5 ]3 n( N" ?9 X' x
" H4 x' M" ~# [6 e3 s
S1
雅虎中国
% r9 }: |0 d ]) r
+ K! i! [" x' c6 K* ~0 i·单击触发
( |0 h) S- P: W9 _$ u
·<A>块锁定:a{display:block;height:16px;}/*将A锁定为块级,再定义高度和宽度*/
7 d% e& e, x9 H: C+ {·再次单击弹出链接:在<A>标记的onclick事件中需要执行读取时,return false;否则return true;
4 \! L4 y$ l, g·AJAX读取数据
; O1 A6 C$ T% r* P! E- ?
·数据暂存
" ^& P, C) q. k1 m- G0 m: E- N
·窗口平滑收缩
! X- |3 Q# } w2 L* ]" M$ ?4 L
<!--由于我看不懂雅虎的代码,所以使用了一些基本的代码去实现这些功能,可能效率不高,不过效果是出来了.-->
0 @; u3 E- J) I1 I
7 T# I2 Z# _' k, W R/ a" PS2
网易1 ?' \; {3 x5 f' B8 z
·鼠标滑过延时触发: onmouseover时var waitInterval=window.setTimeout("func();",300);onmouseout时clearTimeout(waitInterval);
! }6 ~" W0 R) }7 C% O
·<A>块锁定、AJAX读取数据、数据暂存、窗口平滑收缩
* y" r3 p/ m- z( n% Q# X! g) {+ f2 r* e6 F; I% M8 ?9 l$ f
其它功能:
6 A- z o4 ^: M* q·cookie记忆
2 e/ a. w- g. B) Z
·最后读取数据的服务器时间
% ~$ P& \5 ?5 w·滑动门技术
5 m4 {4 i. q0 B2 F B
3 w( K( W. P$ D0 ~' B6 K源码下载
& b" H: ?" Z+ u
