一個(gè)功能綜合的CSS滑動(dòng)門特效代碼

2024-09-05 12:20:38

字體：大中小

供稿：網(wǎng)友

一個(gè)功能綜合的CSS滑動(dòng)門特效代碼，在滑動(dòng)門里包含列表、包含圖文混排、包含文字滾動(dòng)，其中任意一個(gè)都是我們常用的，綜合運(yùn)用這些功能才能做出更炫麗、符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)來(lái)。
　　注：本特效的代碼沒有經(jīng)過優(yōu)化，僅為了表現(xiàn)功能，如果要用到你的網(wǎng)頁(yè)話，可以摘錄需要的部分。

<title>一個(gè)綜合的滑動(dòng)門特效代碼</title><style>.tabBox {display: none;}.kind {height:270px;}.kindTabs {width:238px;height:30px;background:url("") repeat-x;border-right:#99CEEE 1px solid;overflow:auto;}.kindTabs ul {margin:0;padding:0;list-style:none;}.kindTabs li {float:left;line-height:30px;text-align:center;}.kindTabs li a {float:left;width:79px;height:30px;font:12px/1.2em Tahoma;color:#333;line-height:30px;background:url("/jscss/demoimg/201007/playbill_tab_current.jpg");text-decoration:none;}.kindTabs li a:hover,.kindTabs li a.current {font:bold 12px/1.2em Tahoma;color:#069;line-height:30px;background:url("/jscss/demoimg/201007/playbill_tab_select.jpg");text-decoration:none;}.kindTabs .title {width:66px;height:21px;background:url("") no-repeat center;}.kind .tabBody {width:238px;height:249px;border-left:#99CEEE 1px solid; border-right:#99CEEE 1px solid; border-bottom:#99CEEE 1px solid; overflow:auto;}/*tab kind content*/.playbillHot {width:218px;height:23px;color:#069;line-height:23px;text-indent:10px;background:#F1FCFE;border:#99CEEE 1px solid;}.playbillList {padding:5px 0;width:220px;height:199px;color:#666;line-height:22px;text-align:left;overflow:hidden;}.playbillList span.BC90 {color:#C90;}.playbillList span.BF09 {color:#F09;}.playbillList span.B990 {color:#990;}.playbillList span.BF60 {color:#F60;}.playbillList span.B069 {color:#069;}.newsMarket {margin:0 auto;width:220px;}.newsMarket a {font-size:12px;width:220px;height:24px;color:#666;line-height:24px;text-indent:10px;text-align:left;background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat;border-bottom:#CCC 1px dotted;text-decoration:none;overflow:hidden;display:block;}.newsMarket a:hover {color:#069;background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat;border-bottom:#069 1px dotted;text-decoration:none;}.newsTopicPic th,.newsTopicPic td {padding:5px 0;vertical-align:top;}.newsTopicPic th a img {padding:3px;width:60px;height:60px;border:#CCC 1px solid;}.newsTopicPic th a:hover img {padding:3px;width:60px;height:60px;border:#F90 1px solid;}.newsTopicPic td {color:#999;line-height:18px;text-align:left;}.newsTopicPic td span a {font:12px Tahoma;color:#069;line-height:18px;text-decoration:none;}.newsTopicPic td span a:hover {color:#069;text-decoration:underline;}.newsTopicPic td a {color:#333;text-decoration:underline;}.newsTopicPic td a:hover {color:#F00;text-decoration:underline;}.newsTopicTxt {margin:0 auto;width:220px;}.newsTopicTxt a {width:220px;height:24px;color:#666;line-height:24px;text-indent:10px;text-align:left;background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat;border-bottom:#CCC 1px dotted;text-decoration:none;overflow:hidden;display:block;}.newsTopicTxt a:hover {color:#069;background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat;border-bottom:#069 1px dotted;text-decoration:none;}.vsList {margin-top:10px;}.vsList td {width:120px;color:#666;text-align:center;}.vsList td a img {padding:4px;width:110px;height:80px;border:#AECFE3 1px solid;}.vsList td a:hover img {width:110px;height:80px;border:#FC0 1px solid;}.vsList td a {color:#666;line-height:20px;}.vsList td a:hover {color:#069;}</style><script language="javascript">/** * 切換TabSheet */function switchCell(tab, n) {	tab=document.getElementsByName(tab);	for(i=0;i<tab.length;i++) tab.item(i).className="tabBox";	tab.item(n).className="";}</script><div   id="70qarhlowxag"   class="kind">	<div   class="70qarhlowxag"   id="tabs1" class="kindTabs">		<ul>			<li>tabsheet1</li>			<li>tabsheet2</li>			<li>中文Sheet</li>		</ul>	</div>	<div   id="70qarhlowxag"   class="tabBody">		<div  name="tab1" id="tab1">			<table width="220" border="0" cellpadding="0" cellspacing="0" align="center">				<tr>					<td height="5"></td>				</tr>				<tr>					<td valign="top" height="234">						<div   id="70qarhlowxag"   class="newsMarket">			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>			<li>中文標(biāo)題</li>						</div>					</td>				</tr>			</table>		</div>				<div name="tab1" id="tab1" class="tabBox">			<table width="220" border="0" cellspacing="0" cellpadding="0" align="center">				<tr>					<td>						<table width="220" border="0" cellpadding="0" cellspacing="0" class="newsTopicPic">							<tr>								<th width="80"><img src="/d/file/p/2024/09-05/3ba18cde11cbd6f421b1c2b7997fe94e.jpg" width="346" height="191" /></th>								<td>									<span>我和我的祖國(guó)：豬倌變狀元</span><br />									中國(guó)成立以來(lái)，政府部門順應(yīng)民心出臺(tái)一系列政策…… [全文]								</td>							</tr>						</table>					</td>				</tr>				<tr>					<td>						<div   id="70qarhlowxag"   class="newsTopicTxt">			<li>通信大跨越</li>			<li>糧食產(chǎn)量翻5倍</li>			<li>農(nóng)機(jī)改變?nèi)嗣?/li>			<li>魏會(huì)信的自述</li>						</div>					</td>				</tr>			</table>		</div>		<div name="tab1" id="tab1" class="tabBox">			<table width="220" border="0" cellpadding="0" cellspacing="0" align="center">				<tr>					<td height="5"></td>				</tr>				<tr>					<td height="25">						<div   id="70qarhlowxag"   class="playbillHot"><li>電視劇《狙擊手》專題</li></div>					</td>				</tr>				<tr>					<td valign="top">						<div   id="70qarhlowxag"   class="playbillList">							<marquee direction="up" scrollAmount="2" onmouseover=this.stop() onmouseout=this.start() >							滾動(dòng)<br />							滾動(dòng)<br />							滾動(dòng)<br />							滾動(dòng)<br />							滾動(dòng)<br />							滾動(dòng)<br />							</marquee>						</div>					</td>				</tr>			</table>		</div>	</div></div>

上一篇：會(huì)自動(dòng)播放樣子也很經(jīng)典的jquery選項(xiàng)卡

下一篇：滑動(dòng)TAB，滑動(dòng)門，CSS+Js代碼