js滑动门效果

时间：6年前阅读：5180

一、什么是滑动门

大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#tab{    
				width: 600px;    
				height: 500px;    
				border: 2px solid darkblue;    
				margin: 50px auto;    
				position: relative;    
			}    
			#tab ul li{    
				list-style: none;    
				width: 200px;    
				height: 50px;    
				float: left;    
				line-height: 50px;    
				text-align: center;    
				font-size: 20px;    
			}    
			#tab .nk{    
				width: 580px;    
				height: 430px;    
				position: absolute;    
				top: 60px;    
				left: 10px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var tab = document.getElementById('tab');    
				var lis = tab.getElementsByTagName('li');    
				var nk = tab.getElementsByClassName('nk');    
				for (y=0;y<lis.length;y++) {    
					lis[y].xh = y;    
					lis[y].onmouseover = function(){    
						for (y=0;y<nk.length;y++) {    
							nk[y].style.display = 'none';    
						}    
						nk[this.xh].style.display = 'block';    
					}    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<div id="tab">    
			<ul>    
				<li style="background: darkcyan;">国内</li>    
				<li style="background: darkgoldenrod;">国外</li>    
				<li style="background: darkgreen;">综合</li>    
			</ul>    
			<div class="nk" style="background: darkcyan; z-index: 3;"></div>    
			<div class="nk" style="background: darkgoldenrod;"></div>    
			<div class="nk" style="background: darkgreen;"></div>    
		</div>    
	</body>    
</html>

代码效果图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

js滑动门效果

网友评论