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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<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("//ku.shouce.com/files/images/201601/56a07ea58f872.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("//ku.shouce.com/files/images/201601/56a07ea59f437.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("//ku.shouce.com/files/images/201601/56a07ea5acda7.jpg") 0 8px no-repeat;
border-bottom:#CCC 1px dotted;
text-decoration:none;
overflow:hidden;
display:block;
}
.newsMarket a:hover {
color:#069;
background:url("//ku.shouce.com/files/images/201601/56a07ea5bc1cb.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("//ku.shouce.com/files/images/201601/56a07ea5acda7.jpg") 0 8px no-repeat;
border-bottom:#CCC 1px dotted;
text-decoration:none;
overflow:hidden;
display:block;
}
.newsTopicTxt a:hover {
color:#069;
background:url("//ku.shouce.com/files/images/201601/56a07ea5bc1cb.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><a href="http://www.baidu.com" onMouseMove="switchCell('tab1',0)">tabsheet1</a></li>
			<li><a href="#" onMouseMove="switchCell('tab1',1)">tabsheet2</a></li>
			<li><a href="#" onMouseMove="switchCell('tab1',2)">中文Sheet</a></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><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></li>
			<li><a title="title" href="#">中文标题</a></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"><a href="#"><img src="//ku.shouce.com/files/images/201601/56a07ea8e8b25.jpg" width="346" height="191" /></a></th>
								<td>
									<span><a href="#">我和我的祖国：猪倌变状元</a></span><br />
									中国成立以来，政府部门顺应民心出台一系列政策…… <a href="/">[全文]</a>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						<div class="newsTopicTxt">
			<li><a title="Title" href="#">通信大跨越</a></li>
			<li><a title="title" href="#">粮食产量翻5倍</a></li>
			<li><a title="title" href="#">农机改变人民</a></li>
			<li><a title="title" href="#">魏会信的自述</a></li>
						</div>
					</td>
				</tr>
			</table>
		</div>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

菜单导航

描述

一个功能综合的CSS滑动门特效代码，在滑动门里包含列表、包含图文混排、包含文字滚动，其中任意一个都是我们常用的，综合运用这些功能才能做出更炫丽、符合标准的网页来。