JavaScript+CSS双层嵌套的滑动门导航块

2024-09-05 12:20:31

字体：大中小

来源：转载

供稿：网友

JavaScript+CSS联合完成一个特别的滑动门功能，让两个滑动块分里面两层嵌套在一起，其实这种使用价值不太大，只不过这里可以当作一个技术问题来共同探讨，要注意一下CSS中的margin那里调节各个li之间的距离,position是保证下边框的出现，其它的请看代码里的注释吧。

<!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>双层嵌套的滑动门导航块-vevb.com</title><style>*{font-size:9pt;}#tab{width:400px;	height:auto;	margin:0 auto;		position:relative;}  ul{list-style:none; margin-left:20px;}li{ float:left;height:30px;background:url(/jscss/demoimg/201002/tr2.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}.dise{display:block;}.undise{display:none;}.fff{background:url(/jscss/demoimg/201002/tr.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*/#kao{position:absolute;	 top:40px;}</style></head><script  language="javascript">function g(o){return document.getElementById(o);}function showdiv(i){for(j=1;j<=3;j++){g("div"+j).className="undise"g("li"+j).className=""}g("div"+i).className="dise"g("li"+i).className="fff"}function showdiv1(i){for(j=4;j<=6;j++){g("div"+j).className="undise"g("li"+j).className=""}g("div"+i).className="dise"g("li"+i).className="fff"}</script><body>	<div div id="tab">		<ul>		<li id="li1" class="fff"><span onmouseover="showdiv(1)">源代码</span></li>		<li id="li2"><span onmouseover="showdiv(2)">网页特效</span></li>		<li id="li3"><span href="#" onmouseover="showdiv(3)">编程类</span></li>		</ul>		<div class="all">		<div id="div1" class="dise">ada</div>		<div id="div2" class="undise">b</div>		<div id="div3" class="undise">c</div> 	</div>    	<div id="kao">    	<ul >		<li id="li4" class="fff"><span onmouseover="showdiv1(4)">精品源码</span></li>		<li id="li5"><span onmouseover="showdiv1(5)">常用特效</span></li>		<li id="li6"><span href="#" onmouseover="showdiv1(6)">编程</span></li>		</ul>		<div class="all">		<div id="div4" class="dise">ada</div>		<div id="div5" class="undise">b</div>		<div id="div6" class="undise">c</div> 	</div>      </div>    </div></body></html>

上一篇：手写一个简易的CSS/JS滑动门

下一篇：Js打造层拖动实例：网站菜单拖拽移位效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注