查看完整版本: CSS+Javascript实用的滑动文本选项卡显示

snowfox373 2007-11-4 03:46

CSS+Javascript实用的滑动文本选项卡显示

CSS+Javascript实现新闻滑动文本选项卡显示，在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容：[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> Q{.V2j?
<HTML><HEAD><TITLE>绝对经典的滑轮新闻显示(javascript+css)</TITLE>
Jw6^+]X*o <META http-equiv=Content-Type content="text/html; charset=gb2312">
+@$|oCS;~7{3v r1} <style type="text/css">
yD:n"n U0o,J ?i <!-- {nR5FQ!jE
*{padding:0; margin:0} Q x!q\{S9vw
img{border:0; display:block;}
#`bmWxe g1v BODY {
:sH(`$E#KW PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center \JF"fj `+_Y$G
}
I7fq _G9[u#D .dis {
5q'U,p(@%Q"R DISPLAY: block /MnV%}%c't
} H%@lZ.z6{ ?_d
.undis { k@HF'QL'v1e
DISPLAY: none
*VjB"t7u!tJE } y@K)p} d+eG0Tr
#cntR,#cntR2{
0\n&lL'^ WIDTH: 302px
#k%f2c"p:i9qf }
eLrF'pX0E%u #NewsTop,#NewsTop2{ cQ#O P$A8E
CLEAR: both; MARGIN-BOTTOM: 16px
E[)L a| } 5Lb ^P2so$UI h
#NewsTop P,#NewsTop2 P {
x7\,e{qoo F@/j5H@ I FLOAT: left; LINE-HEIGHT: 21px
|$l^BY#Q;kHn } `]"E+Y@
#NewsTop P.topTit,#NewsTop2 P.topTit{ *M Zo KH1| D3vu1Z
FONT-WEIGHT: bold; WIDTH: 117px VB0g%i~
}
+k8bKe];?K5B*r_v#r k #NewsTop P.topC0,#NewsTop2 P.topC0 {
k2H!t gj b1YC#c|)g BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer @0wO'O~1t
}
"HE&a&[NJ St^ #NewsTop P.topC1,#NewsTop2 P.topC1 {
5@l:\4hY/\E8Ec BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
w;?RWE$rfc }
)G1lc;D @(q3X? #NewsTop #NewsTop_tit,#NewsTop2 #NewsTop_tit2 {
"` rjJ"c nj)c BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
%I(_&CGUp/d dU } J5r:o3_ qB.Uv4@
#NewsTop #NewsTop_cnt,#NewsTop2 #NewsTop_cnt2 { b*[9h l i
PADDING-LEFT: 32px; BACKGROUND: url(o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left 8? {!yk s9T%u
} uwC$Mn#bS!y
#NewsTop #NewsTop_cnt A,#NewsTop2 #NewsTop_cnt2 A { ;H)H+A rN$et
COLOR: #666; TEXT-DECORATION: none ,G"taM$a P7d A
} B0A!ZfM2Vt
#NewsTop #NewsTop_cnt A:hover,#NewsTop2 #NewsTop_cnt2 A:hover { 1R ~+lQ @y0{4}h
COLOR: #c2130e; TEXT-DECORATION: underline
I [@"HW _ } h5@|{,KgfTn
-->
)fZt-s|0J2@R </style>
M;f%m ko` R </HEAD> Q)e%M|/ztf!v:Z(hW
<BODY>
1Y/u8vV)p'O\ feF8m <DIV id="cntR">
6T]SR)HD7\1A4@H <DIV id="NewsTop">
wgqKc7z6E;s <DIV id="NewsTop_tit">
4lE_9n3bb <P class="topTit">新闻排行</P>
~ j:V&b D/Wr A <P class="topC0">国内</P>
$h ^ ?5Y/H7R:U"vir$e2E <P class="topC0">国际</P> ]]quEu-gyJHP
<P class="topC0">社会</P>
)ZF6g5S$j{l <P class="topC0">网评</P> ;\9tL L&p s#H0u
</DIV> ]g%[;Li0^^!{(S
<DIV id="NewsTop_cnt"> 5Qo N#K{9hO
<SPAN title="Don't delete me"></SPAN>
l:xBW0U"no1S <SPAN> g0J^(fpk
<A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A>b'FU.oR~
iA.c9oLs+p'b
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A> \'s/m&Z%p$lX
C;@YR1X K.GA
<A href="#" target=_self>物权法:满70年住宅建设用地使用权将自动续期</A>L-X}x(oC8k-{
5jWv8PL g BaQ
<A href="#" target=_self>弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A>
-R.zY1?5Y"G (]|[i J_Iq
<A href="#" target=_self>揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A>
U h.O&S_]S_\
,_ N.n*v+l <A href="#" target=_self>美军高官:不排除和中国发生直接军事对抗可能</A>#N}r6x}3h pX
l}oZ'b
<A href="#" target=_self>浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A>'I+Dn(^$oc*M'A
2h#Zg1@tG
<A href="#" target=_self>西方炒作"中国航母威胁论"称05年已正式服役</A>
5[M8?@r1c~V6j `%k.k+U{3L
<A href="#" target=_self>女孩生活无法自理请人大代表递交安乐死议案</A>
!e8CJk-f/L7P 3tX c.MU5r:i#h
<A href="#" target=_self>建设部：住房公积金制度将覆盖农民工</A>
G)qX.zPp5{ Ud
T:BH XS1q%do <div align="right"><A href="#" target=_self>...more</A></div>
z ~!p5b.Z </SPAN>
os [K5DSb6o <SPAN> c#S3Y| Qj
<A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A>
.p_9QUY[Y4e4N5T N;a)egl
<A href="#" target=_self>组图：美国总统布什车队被撞</A>
:M%CFn O `+TPQVR3U
xB)@*^xO$`6^'K <A href="#" target=_self>梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</A>
x[yv[yG D7X3x8n Q| ~Qg&M
<A href="#" target=_self>孟加拉国严打贪官人人自危奔驰宝马抛弃路边</A>
FEYokA)O G*gI&pr{3uZ
<A href="#" target=_self>韩国将举行大规模军事演习(图文)</A>
%}3q$Z us7[6Z xe Ta4V\
<A href="#" target=_self>组图：土星最大卫星表面发现“海洋”</A>
(cQ-y2Rm8J i)L
%j$^0b:SdJA <A href="#" target=_self>墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</A>
;@Tm~"jB m1qG,Fw T:byj)D5\7@K'J6q
<A href="#" target=_self>组图：全球掀起裸体抗议加拿大捕猎海豹活动</A>
u6YPQ$~*X/m+m
Dx+_P/n2J9R`H-\ sU i;e <A href="#" target=_self>美潜艇在百慕大失踪一晚航母战群出动搜索</A>9B"a:w'`p.sn"QL
:v"^&hwPC8By1E
<A href="#" target=_self>匈牙利20万人示威 政要被民众扔鸡蛋(组图)</A>
#C.?N~M OBoRO
q,f1`x,}pt <div align="right"><A href="#" target=_self>...more</A></div>
T9L.nm5I-T9W G#X </SPAN> y~H`x3]QON
<SPAN>
NB `"B#b <A href="#" target=_self>深圳女工被三名男子轮奸男友目睹过程(组图)</A>
S-t"Z&Z7B L&wK#U`
'A+du,k(gJ\\1v <A href="#" target=_self>男子珍藏一角钱“币王”价格高达1.3万(图)</A> b*a j$a.F
&j lRjm;WoE
<A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A>/S-s6?,i^k Y3v+W']9Us"e
7kkn$a-qQcO q
<A href="#" target=_self>组图：老妻少夫演绎忘年恋69岁妻子成功除皱</A>
\c,YAj G-r9E
?]mG+dXE <A href="#" target=_self>陕西蓝田县电视台播放淫秽影像 达10分钟左右</A>Uv%r/Xra

3PJ FMY!K M$[:k&M.t <A href="#" target=_self>女子自称被大学教授诱骗同居讨要分手费(图)</A>!~!Laf%q/i ?AJv

~ lr%KC2B <A href="#" target=_self>组图：男女私处成造型“性”趣礼品太出格</A>Y{!AE1z3Ny'a
&\!Cg6g2k S [*U
<A href="#" target=_self>组图：四川泸州16岁女孩打造中国第一丑女</A>
#gI;w Tu*~*G l V"\I0c,rDwo
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A>#e(~!~'Y#^$M p i)~
^1m-Cr%X"M ez W
<A href="#" target=_self>深圳发现睾丸被摘男童尸体续：疑为1月前失踪</A>
3Y D?M`u5`
Mox E'biE/S/\ <div align="right"><A href="#" target=_self>...more</A></div> HP?1u'[.IS)BU
</SPAN> arR']:cB q5H~
<SPAN> s8T&NG4j5|
<A href="#" target=_self>养路费征稽员强制扣车致三轮车夫惨死车轮下</A> OiO a;vx6f

i;J z&Eu{ ]Wpo ]&s <A href="#" target=_self>20多位学者谈中医问题 方舟子遭多名专家批驳</A>
Ilw8h,_)XKx PiMgf.L
<A href="#" target=_self>考研女生自称揭露监考老师作弊 成绩被判零分</A>`%wWkyt? D&\

MN7YQw'm.E <A href="#" target=_self>全国政协委员建议一户一房制引起网民热议</A>
?R;]A?Wv{0T4EGn
-m\wH NpY <A href="#" target=_self>河南周口市6名警察将人打昏后扔下楼摔死</A> |F!~-A7R$v5I
k?sSL%Tk.u0z
<A href="#" target=_self>组图：69岁老妻除皱成功 与少夫开始新生活</A>
VM'L){Oh#Y5P Ox0Uk`Ula
<A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A>
;d1N2Ws(og(| 0?%q:@c{"r$d
<A href="#" target=_self>美上将：解放军不是美军对手 导弹打不垮台湾</A>.C)z,f U]*I~_l M
5y{/B~T}6GW~
<A href="#" target=_self>新疆阜康铁路桥梁坍塌导致运煤列车脱轨</A>
\U K$F6r)\~ wiJD v GD)a'y+nb
<A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A>
P!\ at:C rQ (c-_4c I[
<div align="right"><A href="#" target=_self>...more</A></div> +@'Mn ],g3}"]r
</SPAN> 3wQ6~ FL:j1u5j5F
</DIV> _ pR x:CB
<DIV id="cntR2">
4K^*_A-F&@4u <DIV id="NewsTop2"> @!ysx/f(o"i"R
<DIV id="NewsTop_tit2"> 8Vv/N0EiJ
<P class="topTit">新闻排行</P> c]0ryk
<P class="topC0">国内</P>
*T5cnQz.LeB <P class="topC0">国际</P> F8C&Tj}]
<P class="topC0">社会</P> ~5c @*B`&E]2Car.S
<P class="topC0">网评</P> g6@p-S q){1cj}
</DIV> Qk+XJ;U!Z'P"h
<DIV id="NewsTop_cnt2">
xG-A,NeY|w <SPAN title="Don't delete me"></SPAN>
r8G U!~-wkQ[ <SPAN>
V.q$JI vK)ld1Lx <A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A>Ij?(y` C
,K5T ].~*E'fP:k"ZE
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A>"N0_ k*OuN2k;t
"@2|/j?;M"UI!{
<A href="#" target=_self>物权法:满70年住宅建设用地使用权将自动续期</A>)I$c| c~k}
8S*dTg~b1z
<A href="#" target=_self>弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A>
w \2Pxh @0j3a/V3J xGu"B
<A href="#" target=_self>揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A>
0W+W-E9_kf p7V_ b
5c9V-Y"UD6o f? <A href="#" target=_self>美军高官:不排除和中国发生直接军事对抗可能</A>
&_O*Z$nhA2uL f}uf D6t8E
<A href="#" target=_self>浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A>Sw;Bp6R

w DHM F q!F <A href="#" target=_self>西方炒作"中国航母威胁论"称05年已正式服役</A>}X)U? d%FS{
h `6i%EZsw
<A href="#" target=_self>女孩生活无法自理请人大代表递交安乐死议案</A>{i9\,B5L"e[

2K#kI{~;w;{3W(Nx <A href="#" target=_self>建设部：住房公积金制度将覆盖农民工</A>
/}.?S,wQ g_5ki 0RNVL(]2|
<div align="right"><A href="#" target=_self>...more</A></div>
$o4Tm u4x_6R[*SP8D+z </SPAN>
;G%rrpg,xk4\U#J)T <SPAN>
J(E ? Fp ]1g3? <A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A>
z WQ$Y$MO2H7v U
T/u)Z [*q.^edNo <A href="#" target=_self>组图：美国总统布什车队被撞</A>
Ux xYOH&\ M9y e$F{[c`
<A href="#" target=_self>梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</A>u(_'`8y/z^

6J^i}m&\3LSo <A href="#" target=_self>孟加拉国严打贪官人人自危奔驰宝马抛弃路边</A>
wU6Wu4m.V:Tn
m J6[j$~_-q?-G <A href="#" target=_self>韩国将举行大规模军事演习(图文)</A> J%F4EkR s

9o v(IJ*i <A href="#" target=_self>组图：土星最大卫星表面发现“海洋”</A>P3jYn]T7v S
Hz4W+Sv+YG
<A href="#" target=_self>墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</A>*rJ~C7j Ky

E;?p"qwA'h <A href="#" target=_self>组图：全球掀起裸体抗议加拿大捕猎海豹活动</A>u A?R3QZ1@s
%c f$@/s"sS
<A href="#" target=_self>美潜艇在百慕大失踪一晚航母战群出动搜索</A>"[t W+Z}3G F1FT

JJ[c3?/q1| <A href="#" target=_self>匈牙利20万人示威 政要被民众扔鸡蛋(组图)</A>
F@B)YTN&R"@
#]2Tiu(\2\E <div align="right"><A href="#" target=_self>...more</A></div> %s.~j&Yqo5y6[/W
</SPAN>
A7V l%jd7`H0Q{ <SPAN>
@$G1T @%lx6LV <A href="#" target=_self>深圳女工被三名男子轮奸男友目睹过程(组图)</A>(mg:~k:j2JSCq
0];r7kL/\lE6n E;a
<A href="#" target=_self>男子珍藏一角钱“币王”价格高达1.3万(图)</A>
v0\fc"^(x2in.N"yG A2Q,VS1p3z)y(mV7E0?,a
<A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A>
\1N/E|c r o.VD
+~{Re1[`S]$N;qQ <A href="#" target=_self>组图：老妻少夫演绎忘年恋69岁妻子成功除皱</A>
n3d5Q,?/oT;Ha
9U6Gzy4f4B(u |3h.u"] CQ <A href="#" target=_self>陕西蓝田县电视台播放淫秽影像 达10分钟左右</A>(UTG:z9F R9Pi
$y2vE$Xd%j:s+rR Bv| h d
<A href="#" target=_self>女子自称被大学教授诱骗同居讨要分手费(图)</A>
7l$c,A:{9i{ [A!Z+OY#`/a#^4J
<A href="#" target=_self>组图：男女私处成造型“性”趣礼品太出格</A>J1O]ts8p6t6I

{+|+P)[Dz;S$}5_WiC <A href="#" target=_self>组图：四川泸州16岁女孩打造中国第一丑女</A>5Y\Hnd/`
'J2lwCd.|+l%N
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A>
f` vS\%U D'A yU`AvZh5P
<A href="#" target=_self>深圳发现睾丸被摘男童尸体续：疑为1月前失踪</A>)fjr?'o^
?E7b#\u}?
<div align="right"><A href="#" target=_self>...more</A></div>
eG7["FV-E9R </SPAN>
^;s(z z(x:rt <SPAN> i U#L5|4~~0G:E
<A href="#" target=_self>养路费征稽员强制扣车致三轮车夫惨死车轮下</A>
g^S|8Nl[~([ !c?J+_5i4li+K4Iv6p
<A href="#" target=_self>20多位学者谈中医问题 方舟子遭多名专家批驳</A>
'[9A%_%H+JD x5w;^
%\.j5bBT,s2n <A href="#" target=_self>考研女生自称揭露监考老师作弊 成绩被判零分</A>
/a,~W/J'Xj%b DO{$G YAvC
<A href="#" target=_self>全国政协委员建议一户一房制引起网民热议</A>
.C RT;ji;r7rTi pa$}BI#s$K
<A href="#" target=_self>河南周口市6名警察将人打昏后扔下楼摔死</A>
kc9p8i'L]Z ,pl:A@C?c2u
<A href="#" target=_self>组图：69岁老妻除皱成功 与少夫开始新生活</A>
eAfz on `5DE-g ZB$^ \bN
<A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A>
LX2}!i)L`#Z
:s1LxV4V%q <A href="#" target=_self>美上将：解放军不是美军对手 导弹打不垮台湾</A>
e @+mkK8k Z
&@9S2_h8U$C9r <A href="#" target=_self>新疆阜康铁路桥梁坍塌导致运煤列车脱轨</A>T9Vt!|V!iC q

5_6k&JR F&S <A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A>*p BY G3s B!s
bY1C7`I+L:wR
<div align="right"><A href="#" target=_self>...more</A></div> +h yN[;iPcZ
</SPAN> -oE&}:gb}d1bd
</DIV>
p{4N7KT <SCRIPT>
7l6z s/vF \hb_ var TagView=function(title,cnt,index){ %?(a:D3U|2Ep7Ql4H7K
var s=this;
*v-T%M4c!u Y this.flag=index||1;
I,m g$p~] var Tags=document.getElementById(title).getElementsByTagName('p'); (@Vl'p$Yi
var TagsCnt=document.getElementById(cnt).getElementsByTagName('span'); 5h2n2`OmJ*Z
var len=Tags.length;
GO u(SL-W for(i=1;i<len;i++){
9{w] G1V*]0\k Tags[i].value = i; 0~/u/{3Q H9Q5e e'N
Tags[i].onmouseover=function(){changeNav(this.value)};
4r:r S/O/G r.g TagsCnt[i].className='undis'; /J1F4V&\3ryg9Tb
}
A!m R"@YH^`1XY Tags[this.flag].className='topC1'; 8a&s)HMH6c
TagsCnt[this.flag].className='dis';
H v]'AF/c function changeNav(v){ -p6j/q:LWgq
Tags[s.flag].className='topC0'; qiW&{/{IhA$QH*q
TagsCnt[s.flag].className='undis';
,PTV9y o s.flag=v; -?]V A o%DH+bd
Tags[v].className='topC1'; c'K7o;r7R8f l&w
TagsCnt[v].className='dis'; 'L ~.k[ GTe!u0i&o"Q
} d(V*chf$?7_:Cp
} 3u\\X3fE-];TgE8^
new TagView('NewsTop_tit','NewsTop_cnt',1);//第一个 m_a6d,e!z
new TagView('NewsTop_tit2','NewsTop_cnt2',1);//第二,,,,然后第n个 0Tn4hx;d*V
</SCRIPT>
;Hd[ W7l0D[ </DIV> N&e M6@0~$vK.xD
</DIV> %B/Z}`!a9I5ev
</BODY></HTML>[/code]
页: [1]
查看完整版本: CSS+Javascript实用的滑动文本选项卡显示