Javascript：实操---导航条滚动

标签：style   blog   http   color   java   os   io   strong   

CSS部分

<style>
*{ margin:0; padding:0;}
.out{ position:absolute;}
.tabs{ width:300px; height:100px; margin-top:20px; position:absolute;}
.slider{ height:7px; width:79px; border-bottom:2px solid #E4393C; text-align:center; overflow:hidden; position:absolute; top:23px; left:0;}
.slider span{height:0; zoom:1; display:inline-block; width:0; margin-top:-10px;border-style:dashed dashed solid dashed; border-width:12px; border-color:transparent transparent #E4393C transparent;}
.nav li{ float:left; list-style:none; width:79px; text-align:center; font-weight:bold; color:#666; font-size:14px;
}
</style>

JS部分

<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript">
function byClass(oParent,sClassName){

    var aEle=oParent.getElementsByTagName("*");
    var arr=[];
    for (var i=0; i<aEle.length; i++){

        if (aEle[i].className==sClassName){
            arr.push(aEle[i]);
        }
    }
    return arr;
}

function tabMove(index){

        var oSlider=byClass(document,"slider")[index];
        var oNav=byClass(document,"nav")[index];
        var aLi=oNav.getElementsByTagName("li");

        var timer=null;

        for (var i=0; i<aLi.length; i++){

            aLi[i].index=i;
            aLi[i].onmouseover=function (){

                var start=oSlider.offsetLeft;
                // var end=this.index*aLi[0].offsetWidth;
                var end=this.offsetLeft;
                var t=0;
                var endT=20;
                var change=end-start;

                clearInterval(timer);
                timer=setInterval(function (){
                    t++;
                    if (t==endT){
                        clearInterval(timer);
                    }
                    oSlider.style.left=Tween.Quart.easeOut(t,start,change,endT)+"px";
                }, 30);

            }
        }
    }
window.onload=function (){

    // var aSlider=document.getElementsByClassName("slider");

    var aOut=byClass(document,"out");
    
    for (var i=0; i<aOut.length; i++){

        tabMove(i);
    }
}
</script>

HTML部分

<div class="out">
<ul class="nav">
    <li>首页</li>
    <li>项目</li>
    <li>技术</li>
    <li>首页</li>
    <li>项目</li>
    <li>首页</li>
</ul>
<div class="slider">
    <span></span>
</div>
</div>
<div class="out" style="top:200px;">
<ul class="nav">
    <li>首页</li>
    <li>项目</li>
    <li>技术</li>
    <li>首页</li>
    <li>项目</li>
    <li>首页</li>
</ul>
<div class="slider">
    <span></span>
</div>
</div>
<div class="out" style="top:50px;">
<ul class="nav">
    <li>首页</li>
    <li>项目</li>
    <li>技术</li>
    <li>首页</li>
    <li>项目</li>
    <li>首页</li>
</ul>
<div class="slider">
    <span></span>
</div>
</div>
<div class="out" style="top:100px;">
<ul class="nav">
    <li>首页</li>
    <li>项目</li>
    <li>技术</li>
    <li>首页</li>
    <li>项目</li>
    <li>首页</li>
</ul>
<div class="slider">
    <span></span>
</div>
</div>
<div class="out" style="top:150px;">
<ul class="nav">
    <li>首页</li>
    <li>项目</li>
    <li>技术</li>
    <li>首页</li>
    <li>项目</li>
    <li>首页</li>
</ul>
<div class="slider">
    <span></span>
</div>
</div>

Javascript：实操---导航条滚动,布布扣,bubuko.com

Javascript：实操---导航条滚动

标签：style   blog   http   color   java   os   io   strong   

原文地址：http://www.cnblogs.com/lxbchengxunyuan/p/3899384.html