您的位置：首页 > 其它

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

2014-10-08 00:00 113 查看

摘要: 动手是最好的记忆力。

效果如图：

兼容：IE6+、chrome、firefox、safari等

源代码如下：（直接复制即可运行）

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： nav

相关文章推荐

新的分享

章节导航