动手练习——底部彩条移动型nav

时间 2019-11-18
标签动手练习底部彩条移动 nav 栏目无线繁體版
原文原文链接
效果如图：javascript
兼容：IE6+、chrome、firefox、safari等css
源代码以下：（直接复制便可运行）html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body,ul,li,a{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
#nav li{
	float: left;
	width: 150px;
	text-align: center;
	padding: 5px 0;
}
#nav li a{
	display: inline-block;
	width: 100%;
	font-family: "Microsoft YaHei";
	color: #3C3C3C;
	font-size: 18px;
	font-weight: 700;
	border-left: 1px solid #E5E5E5;
}
#nav li a.first{
	border-left: 0 none;
}
#nav li a.current{
	color: #F40;
}
#nav .move_bg{
	clear: left;
	position: relative;
	height: 2px;
	width: 100%;
	background-color: #E5E5E5;
}
#nav .move_main{
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 2;
	background-color: #f40;
	font-size: 0;
}
</style>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#" class="first current">第一菜单</a></li>
			<li><a href="#">第一菜单</a></li>
			<li><a href="#">第一菜单</a></li>
			<li><a href="#">第一菜单</a></li>
			<li><a href="#">第一菜单</a></li>
		</ul>
		<div class="move_bg">
			<div class="move_main" id="move_main"></div>
		</div>
	</div>
<script type="text/javascript">
	var nav_a=document.getElementById("nav").getElementsByTagName("a");
	var move_main = document.getElementById("move_main");   //这里不能经过ByName或者ByClassName来拿，不然nodeType和currentStyle在IE9-下报错，而且ByClassName不支持IE9-。
	var current_left = getStyle(move_main, "left").split("px")[0];
	
	for(var i = 0; i < nav_a.length; i++)
	{
		nav_a[i].num = i;
		nav_a[i].old = current_left;
		nav_a[i].onmouseover = function() {
			move(move_main,{"left": (150*this.num+2)});
		}						
		nav_a[i].onmouseout = function() {
			move(move_main,{"left": this.old});						
		};
	}

	/**
	 *
	 * 缓冲运动框架
	 *
	 *用途：改变元素样式来造成动画
	 *
	 *@requires ["this.getStyle"]
	 *@compatibility IE6+/chrome/firefox
	 *
	 * @param {object} obj 元素节点，如：document.getElementById("test")
	 * @param {object} data 须要改变的样式，如：{"width": 100, "fontSize": 14, "opacity": 0.3}
	 * @param {number} speed 运动速度，默认值为8。
	 * @param {function} callback 回调函数
	 * @return {}
	 */
	
	function move(obj,data,speed,callback){
	    //判断obj是不是dom节点
	    if(obj.nodeType!=1&&obj.nodeType!=9){
	    	console.log("false");
		    return false;
	    }   
	    clearInterval(obj.timer);
	    obj.timer=setInterval(function(){
		    var isAllCompleted=true; //假设所有运动都完成了
		    for(attr in data){
		    var attrValue=0;
		      switch(attr){
		        case 'opacity':
		        attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
		        default:
		        attrValue=parseInt(getStyle(obj,attr));
		      }
		      //若是没有传入speed，则为8
		      var move_speed=(data[attr]-attrValue)/(speed||8);
		      move_speed=move_speed>0?Math.ceil(move_speed):Math.floor(move_speed);
		      if(attrValue!=data[attr]) {isAllCompleted=false;}
		      switch(attr){
		        case 'opacity': {
		          obj.style.filter="alpha(opacity="+(attrValue+move_speed)+")";
		          obj.style.opacity=(attrValue+move_speed)/100;
		        }; break;
		        default:obj.style[attr]=attrValue+move_speed+'px';
		      }         
		    }//for in end!
		    //全部循环结束后，只有当所有运动结束后（isAllCompleted=true）时才关闭定时器
		    if(isAllCompleted){
		      clearInterval(obj.timer);
		      if((typeof callback) == 'function') {callback();}
		    } 
	    },30);
	}

	function getStyle(obj, attr) {
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj, false)[attr];
		}
	}
</script>
</body>
</html>