<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        XP折疊菜單&amp;仿QQ2006菜單_javascript技巧

        來源:懂視網 責編:小采 時間:2020-11-27 20:33:59
        文檔

        XP折疊菜單&仿QQ2006菜單_javascript技巧

        XP折疊菜單&仿QQ2006菜單_javascript技巧:特性:更好的外觀:在菜單標題上添加了圖標。 更好的動作:實現了菜單的滑入,滑出效果。 更易的使用:添加了許多注釋,方便使用。 當然還存在一些沒有發現的問題。盼望大家指教:)實現折疊式動態改變style.height的值 這樣不是很專業:) 不過很像了!10
        推薦度:
        導讀XP折疊菜單&仿QQ2006菜單_javascript技巧:特性:更好的外觀:在菜單標題上添加了圖標。 更好的動作:實現了菜單的滑入,滑出效果。 更易的使用:添加了許多注釋,方便使用。 當然還存在一些沒有發現的問題。盼望大家指教:)實現折疊式動態改變style.height的值 這樣不是很專業:) 不過很像了!10

        特性:

        更好的外觀:在菜單標題上添加了圖標。
        更好的動作:實現了菜單的滑入,滑出效果。
        更易的使用:添加了許多注釋,方便使用。

        當然還存在一些沒有發現的問題。盼望大家指教:)
        實現折疊式動態改變style.height的值 這樣不是很專業:) 不過很像了!

        100%的原裝winXP折疊菜單的外觀!如果不一樣您提出來我改。
        (qq2006 在點擊的時候還有一些抖動。)

        先看圖最新添加了 qq2006 的外觀

        測試網頁的地址:navbar.htm
        詳細網址:http://lxbzj.com/showartical.asp?N_id=156
        下載:http://lxbzj.com/upload/200604/menu.zip
        新版本還在制作中。。(更新的js在19層)
        這里是2006-04-13日修改過的js
        -不再需要在每一個里面添加 onclick 和 onkeypress 了 這樣 網頁和js 進一步的分離
        -定義了一個menu類 負責將事件添加到每一個 菜單里面
        -修改了onkeypress
        -添加interval處理
        -添加了一個收起的加速度(不過不是很明顯)
        -添加了Navbar對象,實現在一組menu中只有一個能打開
        -新js 不斷更新中。。

        +-navbar.js中的代碼:
        代碼如下:
        // JavaScript Document
        /*========================================
        * 文件名: navbar.js
        * 編 碼: Utf-8
        * 功 能:實現菜單折疊的javaScript
        * 作 者:雷曉寶
        * 版 本: 2.3
        * 時 間:2006-03-07
        ===========================================*/
        //========================定義menu類==================;
        function Menu(head,child,dir,speed,init_state,ext_on,ext_off)
        {
        this.head = document.getElementById(head);//菜單頭
        this.body = document.getElementById(child);//菜單體
        this.direction = dir;//菜單收起的方向
        this.speed = speed;//速度
        this.ext_on = ext_on;//擴展菜單展開調用
        this.ext_off = ext_off;//擴展菜單收起調用
        this.init_state = init_state;//設置菜單的初始狀態 true/false
        this.a = 10;//加速度
        //私用變量;
        this._interval = false;
        this._last_state = false;
        this._size = false;
        this._temp = false;
        this._js = false;
        this._div = false;
        this._parent = false;
        this._parent_control = false;
        var self = this;
        var temp = new Array(null,null);//temp[0]用來給_off()用,temp[1]用來給_on()用

        //=============================方法=============================
        //點擊事件處理
        this.click = function(e)
        {
        if (self._parent_control)
        {
        self._parent._control(self);
        return false;
        }
        else
        {
        Interval.clear(self._interval);
        if (self._last_state == false)
        {
        self._on();
        return false;
        }
        else
        {
        self._off();
        return false;
        }
        }
        }

        //初始化
        this.init = function()
        {
        this.head.onclick = this.click;
        this.head.onkeypress = function(e)
        {
        e||(e=window.event);
        if (!(e.keyCode ==32 || e.keyCode == 0))return;
        //alert(':)');
        self.click();
        }
        for(var i=0;i {
        if (this.body.childNodes[i].nodeType==1)
        {
        this._div=this.body.childNodes[i];
        break;
        }
        }
        if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height
        {
        this._size = parseInt(this.body.style.height);
        }
        else
        {
        this._size = this._div.offsetHeight;
        }
        switch (this.init_state)
        {
        case true:
        if (this.body.style.display == 'none')
        {
        //this._last_state = false;
        this._on();
        }
        else
        {
        this._last_state = true;
        }
        break;
        default://case false:
        if (this.body.style.display !='none')
        {
        this._last_state = true;
        this._off();
        }
        break;
        }
        }
        //展開菜單
        this._on = function()
        {
        if (self._last_state == false)
        {
        self._last_state = true;
        self.body.style.display="";
        temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;
        if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
        if (self.ext_on)
        {
        self.ext_on(self.head,self.body)
        }
        self._interval = Interval.set(self._action_on,speed);
        }
        //setTimeout('slowon("'+self.body.id+'")',5)
        }
        //收起菜單
        this._off = function()
        {
        if (self._last_state == true)
        {
        self._last_state = false;
        //if (temp[0] == null)
        //{
        temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;;
        //}
        if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size+'px';
        if (self.ext_off)
        {
        self.ext_off(self.head,self.body)
        }
        self._interval = Interval.set(self._action_off,this.speed);
        }
        }
        //以下處理滑動
        this._action_on = function()
        {
        if (parseInt(self.body.style.height)+temp[1]>self._size)
        {
        self.body.style.height = self._size+'px';
        Interval.clear(self._interval);
        }
        else
        {
        self.body.style.height = parseInt(self.body.style.height)+temp[1]+'px';
        temp[1] +=self.a;
        }
        }
        this._action_off = function()
        {
        if(parseInt(self.body.style.height)-temp[0]<0)
        {
        Interval.clear(self._interval);
        self.body.style.display = "none";
        }
        else
        {
        self.body.style.height = parseInt(self.body.style.height)-temp[0]+'px';
        temp[0]-=self.a;
        }
        }
        }
        //meanu類結束

        //====================定義Navbar類,用來管理一組menu集合===============================
        function navbar(dir,a,speed,ext_on,ext_off)
        {
        this.open_only_one = true;//這組menu在任何時刻是否只有一個在開啟,true/false
        this.dir = dir;//menu組的公共方向,既然是一組menu它們應該有相同的方向吧?
        this.a =a;//menu公共加速度
        this.speed =speed;//公共速度
        this.ext_on = ext_on;//公共擴展打開函數調用
        this.ext_off = ext_off;//公共的擴展收起函數調用
        this.menu_item = new Array();//menu組
        this._openning;//如果只允許打開一個菜單,這個就會記錄當前打開的菜單
        this.open_all = function()//
        {
        };
        this.add = function (head,body)//添加menu的函數
        {
        var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);
        this.menu_item.push(temp);
        };
        this.init = function ()//Navbar的初始化函數,必須在add完成后調用
        {
        if(this.open_only_one == true)
        {//如果只允許一個打開,那么僅僅設置菜單組的第一個菜單為打開狀態
        if (this.menu_item.length>0)
        {
        with(this.menu_item[0])
        {
        init_state = true;
        _parent = this;//設置menu的父親為這個Navbar
        _parent_control = true;//設置父親來控制菜單
        init();
        }
        this._openning = this.menu_item[0];
        }
        for(var i = 1; i {//設置出第一個外的其他菜單為關閉,同時設置好其他參數
        with(this.menu_item[i])
        {
        init_state = false;
        _parent = this;
        init();
        _parent_control = true;
        }
        }
        }
        else
        {//如果open_only_one == false 那么僅僅初始化菜單
        for(var i = 0;i {
        this.menu_item.init();
        }
        }
        };
        //額外添加的父親控制函數
        this._control = function(child)
        {
        var self =child;
        Interval.clear(self._interval);
        if (self._last_state == false)
        {
        if (typeof(self._parent._openning) == 'object')
        {
        self._parent._openning._off();
        self._parent._openning = self;
        }
        self._on();
        return false;
        }
        else
        {
        //self._off();
        return false;
        }
        }

        }//Navbar類結束


        //===============================interval 處理=============================
        //注意:_stack 只有20個
        //擴充時必須賦初值1-n
        Interval=
        {
        length:20,
        _action : new Array(length),
        _stack : new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),
        _interval : Array(length),
        _timeout: new Array(length),
        //for(var i=0;i<_action.length;i++)stack.push(i);,
        set:function(action_function,speed,time_out)
        {
        time_out = time_out?time_out:15000;//默認的interval超時為15000秒,如果不需要設置超時,那么將下面的setTimeout 那移行注釋掉;
        var p = Interval._stack.pop();
        if(p)
        {
        Interval._action[p] = action_function;
        Interval._interval[p]=setInterval('if(Interval._action['+p+'])Interval._action['+p+']();',speed);//這里的重復執行函數不能寫成'Interval._action['+p+']'因為很可能Interval.clear以后,還有一次沒有執行完畢,于是就產生了一次錯誤
        Interval._timeout[p] = setTimeout('Interval.clear('+p+')',time_out);//這行設置interval超時,如果不需要可注釋掉;
        return p;
        }
        },
        clear:function(p)
        {
        if (Interval._action[p])
        {
        clearInterval(Interval._interval[p]);
        clearTimeout(Interval._timeout[p]);//這行清除interval超時,如果沒有設置超時可注釋掉;
        Interval._action[p] = "";
        Interval._stack.push(p);
        }
        }
        }
        //Interval 處理結束

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        XP折疊菜單&仿QQ2006菜單_javascript技巧

        XP折疊菜單&仿QQ2006菜單_javascript技巧:特性:更好的外觀:在菜單標題上添加了圖標。 更好的動作:實現了菜單的滑入,滑出效果。 更易的使用:添加了許多注釋,方便使用。 當然還存在一些沒有發現的問題。盼望大家指教:)實現折疊式動態改變style.height的值 這樣不是很專業:) 不過很像了!10
        推薦度:
        標簽: 技巧 菜單 折疊
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 最近的中文字幕大全免费8| 香港特级三A毛片免费观看| 亚洲成AV人片在线观看ww| 亚洲精品人成在线观看| 亚洲另类春色国产精品| 亚洲av纯肉无码精品动漫| 99麻豆久久久国产精品免费| 午夜免费福利小电影| 在线免费观看色片| 中文字幕亚洲一区| 亚洲国产模特在线播放| 97热久久免费频精品99| 黑人精品videos亚洲人| 看Aⅴ免费毛片手机播放| 免费观看黄色的网站| 国产L精品国产亚洲区久久| 亚洲美女免费视频| 亚洲一区二区三区免费| 无码免费午夜福利片在线 | 亚洲国产成人a精品不卡在线| 亚洲人成电影亚洲人成9999网| 国内精品久久久久影院免费| 国产精品公开免费视频| 亚洲精品视频观看| 特级做A爰片毛片免费看无码 | 永久免费观看的毛片的网站| 亚洲伦理一区二区| 中文字幕人成无码免费视频| 亚洲av无码专区在线观看下载| 在线精品亚洲一区二区小说| 久久午夜伦鲁片免费无码| 亚洲精品一品区二品区三品区| 99re免费视频| 亚洲av午夜国产精品无码中文字| 亚洲国产精品激情在线观看| 最好看的中文字幕2019免费| 亚洲精品国产摄像头| 毛片免费视频播放| 国产亚洲色婷婷久久99精品| 免费观看黄色的网站| kk4kk免费视频毛片|