js实现水平伸缩菜单

Posted blogging

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现水平伸缩菜单相关的知识,希望对你有一定的参考价值。

window.onload=function(){
    var aA=document.getElementsByTagName(‘a‘);
    for(var i=0; i<aA.length; i++){
        aA[i].onmouseover=function(){
            var This=this;
            clearInterval(This.time);
            This.time=setInterval(function(){
                    This.style.width=This.offsetWidth+8+"px";
                    if(This.offsetWidth>=160)
                    clearInterval(This.time);
                },30)
        }
        aA[i].onmouseout=function(){
                clearInterval(this.time);
                var This=this;
                this.time=setInterval(function(){
                    This.style.width=This.offsetWidth-8+"px";
                    if(This.offsetWidth<=120){
                        This.style.width=‘120px‘;
                        clearInterval(This.time);
                    }
                },30)
        }
    }
}

 

以上是关于js实现水平伸缩菜单的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 菜单 水平菜单的实现

可伸缩的菜单

wpf 如何实现动态伸缩菜单?

多级伸缩菜单——组合模式

[kubernetes] HPA实现自动水平伸缩POD

菜单伸缩实例