一个简单的滑动门效果
2007-12-24 10:34
417 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS滑动门技术AJAX</title>
<style type="text/css">
<!--
A.mecl {
COLOR: #ffffff;TEXT-DECORATION: none
}
A.mecl:visited {
COLOR: #ffffff; TEXT-DECORATION: none; TOP: 1px
}
A.mecl:hover {
COLOR: #cccccc;
POSITION: relative;
TEXT-DECORATION: none;
TOP: 1px;
}
A.ssd {
COLOR: #000000;TEXT-DECORATION: none
}
A.ssd:visited {
COLOR: #000000; TEXT-DECORATION: none;
}
A.ssd:hover {
COLOR:#006600;
POSITION: relative;
TEXT-DECORATION: none;
}
#header {
height: 200px;
width: 275px;
margin: auto;
padding: 0px;
font-family: "宋体";
font-size: 12px;
float: left;
clear: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 68px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { color:#FFFFFF}
.sec2 { color:#00FF00}
.block {
display: block;
list-style-type: none;
text-align: left;
}
.unblock {
display: none;
list-style-type: none;
}
.yuanjie {
margin-left: 5px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" >
<table width="275" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="200"><script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes
.className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes
.style.display="block";
}
</script>
<div id="header">
<table width="275" height="19" border="0" cellspacing="0" cellpadding="0" background="image/cajy-shxw.gif">
<tr>
<td> <ul id="menu">
<li onMouseOver="secBoard(0)" class="sec1"><a href="" target="_blank" class="mecl">社会新闻</a></li>
<li onMouseOver="secBoard(1)" class="sec1"><a href="" target="_blank" class="mecl">慈善新闻</a></li>
<li onMouseOver="secBoard(2)" class="sec1"><a href="" target="_blank" class="mecl">慈善事迹</a></li>
<li onMouseOver="secBoard(3)" class="sec1"><a href="" target="_blank" class="mecl">活动纪实</a></li>
</ul></td>
</tr>
</table>
<!--内容显示区域-->
<br />
<table width="288" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="282" align="left"><ul id="main" class="yuanjie">
<li class="block">
uuuuuuuuuuuu11111111111111111111
111111
1111111111111111111
11111111111111111
11111111111111
</li>
<li class="unblock">
2222222222222
2222222222222222
22222222222222
22222222222222
uuuuuuuuu
</li>
<li class="unblock">
33333333333333333
333333333333333
333333333333333
33333333333333333
hhhhhhhh
</li>
<li class="unblock">
44444444444444444444
444444444444444
4444444444444444
4444444444444444
444444444444fffffffffffffff
</li>
</ul></td>
</tr>
</table>
<!--内容显示区域-->
</div></td>
</tr>
</table>
</body>
</html>
运行一下,看看效果,还不错,呵呵.............
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS滑动门技术AJAX</title>
<style type="text/css">
<!--
A.mecl {
COLOR: #ffffff;TEXT-DECORATION: none
}
A.mecl:visited {
COLOR: #ffffff; TEXT-DECORATION: none; TOP: 1px
}
A.mecl:hover {
COLOR: #cccccc;
POSITION: relative;
TEXT-DECORATION: none;
TOP: 1px;
}
A.ssd {
COLOR: #000000;TEXT-DECORATION: none
}
A.ssd:visited {
COLOR: #000000; TEXT-DECORATION: none;
}
A.ssd:hover {
COLOR:#006600;
POSITION: relative;
TEXT-DECORATION: none;
}
#header {
height: 200px;
width: 275px;
margin: auto;
padding: 0px;
font-family: "宋体";
font-size: 12px;
float: left;
clear: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 68px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { color:#FFFFFF}
.sec2 { color:#00FF00}
.block {
display: block;
list-style-type: none;
text-align: left;
}
.unblock {
display: none;
list-style-type: none;
}
.yuanjie {
margin-left: 5px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" >
<table width="275" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="200"><script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes
.className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes
.style.display="block";
}
</script>
<div id="header">
<table width="275" height="19" border="0" cellspacing="0" cellpadding="0" background="image/cajy-shxw.gif">
<tr>
<td> <ul id="menu">
<li onMouseOver="secBoard(0)" class="sec1"><a href="" target="_blank" class="mecl">社会新闻</a></li>
<li onMouseOver="secBoard(1)" class="sec1"><a href="" target="_blank" class="mecl">慈善新闻</a></li>
<li onMouseOver="secBoard(2)" class="sec1"><a href="" target="_blank" class="mecl">慈善事迹</a></li>
<li onMouseOver="secBoard(3)" class="sec1"><a href="" target="_blank" class="mecl">活动纪实</a></li>
</ul></td>
</tr>
</table>
<!--内容显示区域-->
<br />
<table width="288" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="282" align="left"><ul id="main" class="yuanjie">
<li class="block">
uuuuuuuuuuuu11111111111111111111
111111
1111111111111111111
11111111111111111
11111111111111
</li>
<li class="unblock">
2222222222222
2222222222222222
22222222222222
22222222222222
uuuuuuuuu
</li>
<li class="unblock">
33333333333333333
333333333333333
333333333333333
33333333333333333
hhhhhhhh
</li>
<li class="unblock">
44444444444444444444
444444444444444
4444444444444444
4444444444444444
444444444444fffffffffffffff
</li>
</ul></td>
</tr>
</table>
<!--内容显示区域-->
</div></td>
</tr>
</table>
</body>
</html>
运行一下,看看效果,还不错,呵呵.............
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个简单的滑动门效果代码
- 一个简单的滑动门效果-完整代码
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 一个简单的行拖动效果
- 想给自己制作一个简单的相册吗？快来看看 怎样实现3D图片相册效果
- 一个简单的投票调查功能构建效果
- Unity3d 一个简单的玻璃效果实现！
- Javascript实现一个简单的输入关键字添加标签效果实例
- 一个简单的层打开效果
- C#实现一个图形的动态效果(简单矩形不断向下运动的实现简单步骤)
- 用ReactJs写一个简单的手风琴菜单效果
- 一个回到顶部的插件topjs，支持自定义，使用简单，带动画效果
- 一个简单的全屏图片上下打开显示网页效果示例
- 一个简单的全屏图片上下打开显示网页效果示例
- 【福利】一个简单实用的JQ轮播效果封装函数
- Bootboxjs是一个简单的js库，简单快捷帮你制作一个Bootstrap的弹出框效果。
- 一个简单css效果
- 01vue的helloworld，vue入门，如何使用vue写一个最简单的效果
- 一个简单的遮罩层效果
- 一个简单的瀑布流效果(主体形式自写)