javascript-导航动画效果

知识点：

　　没有知识点，基础知识BAIBU一下，你就知道。俺的口号是“只做实例，不讲理论“。

效果：

　　

上面的是在网上的效果。我只是做了一个程序框架。

主要代码：

(function(X){
    //滑块效果
    var slideNav=X.SlideNav=function(opts){
        this.defaultOption={
            navItems:[],
            slideId:'slide_box',
            ev:'click',
            currentClass:'current',
            startIndex:0,
            callFn:function(){}
        }
        X.mix(this.defaultOption,opts);
        this.opts=this.defaultOption;
        this.init();
    }
    X.mix(slideNav.prototype,{    
        constructor:slideNav,
        init:function(){
            var that=this;        
            that.slideBox=X.$(that.opts.slideId);        
            X.each(that.opts.navItems,function(idx){
                var navItem=that.getItem(idx);
                X.addEvent(navItem,that.opts.ev,function(){
                     that.move(that.slideBox,idx);
                })
            });
            that.move(that.slideBox,that.opts.startIndex);
        },
        getItem:function(i){
            return this.opts.navItems[i]||null;    
        },
        addCurrent:function(i){
            var that=this,navItem=that.getItem(i),items=that.opts.navItems;
            X.each(items,function(idx){
                items[idx].className=''                                       
            })
            navItem.className=that.opts.currentClass;
            
        },
        move:function(slideBox,idx){
            var that=this;
            var navItem=that.getItem(idx);
            that.addCurrent(idx);
            var targetLeft=navItem.offsetLeft;
            var targetWidth=navItem.offsetWidth;
            X.debug(that.getItem(idx));
            X.anim(slideBox,{'left':targetLeft,'width':targetWidth},100,function(){
                that.opts.callFn(idx);                                                             
            });    
        }
    })
})(xcarUI)

调用代码：

<div class="nav_main">
    <ul class="nav" id="nav"><li class="current">首页</li><li>新闻</li><li>博客</li><li>关于我们</li><li>联系我们</li><li>联系我们联系我们</li><li>联系我们联系我们</li></ul>
    <span id="slide_box" class="slide_arr"><i></i></span>
</div>
<div id="nav_con" style="clear:both"></div>

<script>
var nav=xcarUI.$('nav');
var navItems=xcarUI.$$('li',nav);
var navCon=xcarUI.$('nav_con');
new xcarUI.SlideNav({navItems:navItems,startIndex:1,callFn:function(i){
    navCon.innerHTML=i;
}})
</script>

样式：

<style>
div,ul,li{ margin: 0; padding:0;}
li,ul{ list-style:none;}
.nav_main{
    position: relative;
    height: 30px;
    font:normal 12px/22px 'microsoft yahei';
}
.nav li{
    float: left;
    padding: 3px 10px;
    border:solid 1px none;
    border-top: solid 5px #036;
    text-align: center;
    cursor: pointer;
}
.nav .current{
    padding: 3px 9px;
    border-left: solid 1px #036;
    border-right: solid 1px #036;
}
.slide_arr{
    display: block;
    position: absolute;
    height: 5px;
    background: #036;
    top:33px;
}
.slide_arr i{
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    border:solid 5px #fff;
    border-bottom:solid 5px #036;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    line-height: 0;
}
</style>

以上只是一部分代码。

详细代码请见以下连接：

https://github.com/cedrusweng/xcarUI/blob/master/demo/SlideNav/SlideNav.htm