動手練習——底部彩條移動型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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。