一个功能综合的CSS滑动门特效代码

2024-09-05 12:20:38

字体：大中小

来源：转载

供稿：网友

一个功能综合的CSS滑动门特效代码，在滑动门里包含列表、包含图文混排、包含文字滚动，其中任意一个都是我们常用的，综合运用这些功能才能做出更炫丽、符合标准的网页来。
　　注：本特效的代码没有经过优化，仅为了表现功能，如果要用到你的网页话，可以摘录需要的部分。

<title>一个综合的滑动门特效代码</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 class="kind">	<div id="tabs1" class="kindTabs">		<ul>			<li>tabsheet1</li>			<li>tabsheet2</li>			<li>中文Sheet</li>		</ul>	</div>	<div 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 class="newsMarket">			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</li>			<li>中文标题</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>我和我的祖国：猪倌变状元</span><br />									中国成立以来，政府部门顺应民心出台一系列政策…… [全文]								</td>							</tr>						</table>					</td>				</tr>				<tr>					<td>						<div class="newsTopicTxt">			<li>通信大跨越</li>			<li>粮食产量翻5倍</li>			<li>农机改变人民</li>			<li>魏会信的自述</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 class="playbillHot"><li>电视剧《狙击手》专题</li></div>					</td>				</tr>				<tr>					<td valign="top">						<div class="playbillList">							<marquee direction="up" scrollAmount="2" onmouseover=this.stop() onmouseout=this.start() >							滚动<br />							滚动<br />							滚动<br />							滚动<br />							滚动<br />							滚动<br />							</marquee>						</div>					</td>				</tr>			</table>		</div>	</div></div>

上一篇：会自动播放样子也很经典的jquery选项卡

下一篇：滑动TAB，滑动门，CSS+Js代码