弹性菜单设计与实现-优快云博客

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个响应式的弹性菜单。通过定义样式和交互逻辑，用户可以轻松导航网站的不同部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>运动-弹性菜单</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0; padding:0;}
.wrap{
	width:400px; margin:50px auto;
	position:relative;
}
ul,#mark{position:absolute; top:0; left: 0; width:500px; overflow:hidden;}
ul li{width:100px; float:left; height:40px; line-height:40px; background-color:green; list-style:none; text-align:center; color:#ddd; cursor:pointer;}
#mark{color:#fff; width:100px; overflow:hidden; z-index:1;}
#mark li{color:#000; background-color:pink;}

</style>
</head>
<body>
<div class="wrap">
    <ul id="nav">
    	<li id="mark">
    		<ul>
    			<li>首页</li>
		    	<li>产品展示</li>
		    	<li>新闻资讯</li>
		    	<li>团队荣誉</li>
		    	<li>联系我们</li>
    		</ul>
    	</li>
    	<li class="box">首页</li>
    	<li class="box">产品展示</li>
    	<li class="box">新闻资讯</li>
    	<li class="box">团队荣誉</li>
    	<li class="box">联系我们</li>
    </ul>
</div>
<script>
	// 获取className
	function getClass(className,tag){
		var tag = tag||document,
			className = className||'*',
			result = [],
			ele = document.getElementsByTagName(tag),
			pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
		if(document.getElementsByClassName){
			return document.getElementsByClassName(className);
		}else{
			for(var i =0; i<ele.length; i++){
				if(pattern.test(ele[i].className)){
					result.push(ele[i]);
				}
			}
		}
	}

	window.onload = function(){
		var oMark = document.getElementById('mark');
		var oMarkUl = oMark.getElementsByTagName('ul')[0];
		var aBox = getClass('box');
		var timer = null;
		var timer2= null;
		var iSpeed = 0;

		for(var i=0; i<aBox.length; i++){
			aBox[i].onmouseover = function(){
				clearTimeout(timer2);
				startMove(this.offsetLeft);
			};
			aBox[i].onmouseout = function(){
				timer2 = setTimeout(function(){
					startMove(0);
				},100);
			};
		}

		oMark.onmouseover = function(){
			clearTimeout(timer2);
		}
		oMark.onmouseout = function(){
			timer2 = setTimeout(function(){
				startMove(0);
			},30);
		}
		function startMove(iTarget){
			clearInterval(timer);
			timer = setInterval(function(){
				var distance = iTarget - oMark.offsetLeft;

				iSpeed += distance/6;
				iSpeed *= 0.70;
				if(Math.abs(iSpeed)<=1 && Math.abs(distance)<=1){
					clearInterval(timer);
					oMark.style.left = iTarget + 'px';
					oMarkUl.style.left = -iTarget + 'px';
					iSpeed = 0;
				}else{
					oMark.style.left = oMark.offsetLeft + iSpeed +'px'
					oMarkUl.style.left = -oMark.offsetLeft + 'px';
				}
			},30);
		}
	}
</script>
</body>
</html>