原生Javascript滑动导航菜单

学到JS动画这块，试着做一些以前觉得很炫的效果，其实思考了、练习了，也就会了，以前太懒，一在要勤奋些学习，因为这是我喜欢的东西，学习自己喜欢的知识不需要解释，动力源源不断。 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        ul {
            list-style: none;
        }
 
        body {
            font: 14px/1.5 "Microsoft YaHei";
        }
 
        a {
            color: #FFF;
            text-decoration: none;
        }
 
        .box {
            width: 1000px;
            height: 30px;
            line-height: 30px;
            background: #999;
            margin: 100px auto;
            position: relative;
        }
 
        #nav_list {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
        }
 
        #nav_list li {
            width: 100px;
            height: 30px;
            text-align: center;
            float: left;
        }
 
        #moveDiv {
            width: 100px;
            height: 40px;
            position: absolute;
            background: #333;
            z-index: 1;
            left: 0;
            top: -5px;
        }
    </style>
    <script type="text/javascript">
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj, false)[attr];
    }
}
 
function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var iCur = 0;
        if (attr == 'opacity') {
            iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        }
        else {
            iCur = parseInt(getStyle(obj, attr));
        }
 
        var iSpeed = (iTarget - iCur) / 5;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
        if (iCur == iTarget) {
            clearInterval(obj.timer);
        }
        else {
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            }
            else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
 
        }
    }, 30);
}
        function getByClass(oParent, sClass) {
            if (oParent.getElementsByClassName) {
                return oParent.getElementsByClassName(sClass);
            }
            else {
                var aEle = oParent.getElementsByTagName('*');
                var aResult = [];
 
                for (var i = 0; i < aEle.length; i++) {
                    if (aEle[i].className == sClass) {
                        aResult.push(aEle[i]);
                    }
                }
                return aResult;
            }
        }
        window.onload = function () {
            var navList = document.getElementById('nav_list');
            var navListLi = navList.getElementsByTagName('li');
            var moveDiv = document.getElementById('moveDiv');
            var current = getByClass(navList, 'current')[0];
            var i = 0;
 
            startMove(moveDiv,'left',current.offsetLeft);
            for (i = 0; i < navListLi.length; i++) {
                navListLi[i].onmouseover = function () {
                    //moveDiv.style.left=this.offsetLeft+'px';
                    startMove(moveDiv, 'left', this.offsetLeft);
                }
 
                navListLi[i].onmouseout=function()
                {
                    startMove(moveDiv,'left',current.offsetLeft);
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul id="nav_list">
        <li><a href="###">nav001</a></li>
        <li><a href="###">nav002</a></li>
        <li><a href="###">nav003</a></li>
        <li class="current"><a href="###">nav004</a></li>
        <li><a href="###">nav005</a></li>
        <li><a href="###">nav006</a></li>
    </ul>
    <div id="moveDiv"></div>
</div>
</body>
</html>

金牌狙击手

52html5是一个web前端|html5资源平台，为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等，并涉及css3、javascript前端知识。