HTML与JavaScript实现选项卡效果-优快云博客

本文链接：https://blog.youkuaiyun.com/liujiajie1990/article/details/7744017

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
	*{margin:0;padding:0;}
	#box{width:800px;margin:100px auto;height:31px;font-size:12px;position:relative;}
	#box dd{color:#373737;display:inline;float:left;width:100px;height:30px;line-height:30px;text-align:center;cursor:pointer;background-color:#ECF2EA;border-bottom:1px solid #7EC326;}
	#box dt{width:100px;height:5px;background-color:#7EC326;position:absolute;left:0;bottom:0;}
</style>
<script type="text/javascript">
<!--
	var iSpeed=0;
	var iLeft=0;
	var nub=0;
	function $(obj){return document.getElementById(obj)};
	function startMove(obj,attr){
		clearInterval(obj.oTime);
		obj.oTime=setInterval(function(){
			iSpeed+=(attr-obj.offsetLeft)/5;
			iSpeed*=0.7;
			iLeft+=iSpeed;
			if(Math.abs(iSpeed)<1 && Math.abs(attr-obj.offsetLeft)<1){
				clearInterval(obj.oTime);
				obj.style.left=attr+'px';
			}
			else{
				obj.style.left=iLeft+'px';
			}
		},30)
	}
	window.οnlοad=function(){
		var i=0;
		var oDd=$('box').getElementsByTagName('dd');
		for(i=0;i<oDd.length;i++){
			oDd[i].οnmοuseοver=function(){
				startMove($('dt'),this.offsetLeft)
			}
			oDd[i].οnclick=function(){
				nub=this.offsetLeft;
			}
			oDd[i].οnmοuseοut=function(){
				startMove($('dt'),nub)
			}
		}
	}
//-->
</script>
</head>
<body>
<dl id="box">
	<dt id="dt"></dt>
	<dd>一</dd>
	<dd>二</dd>
	<dd>三</dd>
	<dd>四</dd>
	<dd>五</dd>
	<dd>六</dd>
</dl>
</body>
</html>

js-弹性点击菜单