简洁实用js+css滑动门特效-JS特效-爱易网页

简洁实用js+css滑动门特效

日期：2014-05-18　浏览次数：20334 次

以下是程序代码

<!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" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>网页特效 简洁实用js+css滑动门特效 站长特效网</title>
<style>
*{
margin:0px;
padding:0px;
font-size:9pt;
}
#tab_zzjs{width:400px;
height:auto;
margin:0 auto;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(15.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里调节各个li之间的距离,position是保证下边框的出现*/
.on_zzjs{display:block;}
.off_zzjs_net{display:none;}
.on_zzjs_net{background:
url(/img/tr_20110117zzjs_net.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
}
</style>
</head>
<script  language="javascript">
function g(o) { return document.getElementById(o); }
function showdiv_zzjs_net(i) {
for (j = 1; j <= 3; j++) {
g("zzjs_div" + j).className = "off_zzjs_net"//将三个都设为off_zzjs_net，以便将来可以设置显示的那个；
g("zzjs_li" + j).className = ""//消除原来所有li的属性
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
g("zzjs_div" + i).className = "on_zzjs"
g("zzjs_li" + i).className = "on_zzjs_net"
}//欢迎来到站长z特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
</script>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div id="tab_zzjs">
<ul>
<li id="zzjs_li1" class="on_zzjs_net"><span onmouseover="showdiv_zzjs_net(1)">站长一号</span></li>
<li id="zzjs_li2"><span onmouseover="showdiv_zzjs_net(2)">站长二号</span></li>
<li id="zzjs_li3"><span href="#" onmouseover="showdiv_zzjs_net(3)">站长三号</span></li>
</ul>
<div id="all">
<div id="zzjs_div1" class="on_zzjs"><a href="http://www.zzjs.net">站长一号内容</a>，站长特效网，以质量为核心，以是实用为目的，打造一流网页特效站！</div>
<div id="zzjs_div2" class="off_zzjs_net"><a href="http://www.zzjs.net">站长二号内容</a>，站长特效网，以质量为核心，以是实用为目的，打造一流网页特效站！</div>
<div id="zzjs_div3" class="off_zzjs_net"><a href="http://www.zzjs.net">站长三号内容</a>，站长特效网，以质量为核心，以是实用为目的，打造一流网页特效站！</div>
</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

简洁实用js+css滑动门特效

相关资料更多>

推荐阅读更多>