注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

【原创】滑动门导航类,多种好看且实用的示例  

2009-07-07 14:36:06|  分类: DIV+CSS+JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://bbs.blueidea.com/thread-2935255-1-1.html
【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客
_r2_c2.gif (46.67 KB)
2009-6-23 16:48


【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客 【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客

hover1.gif (45.34 KB)
2009-6-25 18:46


【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客

hover3.gif (44.43 KB)
2009-6-25 18:46


【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客

hover.gif (50.47 KB)
2009-6-25 18:46


【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客

num.gif (57.24 KB)
2009-6-26 09:14


【原创】滑动门导航类,多种好看且实用的示例 - frieboy168 - 幽狼De博客

num1.gif (24.73 KB)
2009-6-26 09:14


演示地址:http://www.yaohaixiao.com/effects/samples/ytabs/(今天又整了两个)
下载地址:http://www.yaohaixiao.com/effects/source/ytabs.rar

到今天位置一共更新了8个标签导航的示例,应该常用的一些导航效果这里都有了,由于一直在更新效果,所以现在代码只是为了适应改变而头疼治头的修改了下代 码,代码没有封装好,高手请别见笑,也希望高手能指点下小弟,当然我稍后也会把代码调整下的。其实代码基本的思路就是这样的了,我觉得更主要的大家应该看 看我这些示例的CSS代码和XHTML的结构,看看都使用了那些布局技巧。像二级导航菜单我就充分运用了float属性和position属性的结合,当 然个人能力有限,难免有欠缺的地方,也请大家指正。

YTabs.js(6-26更新)
复制内容到剪贴板
代码:
var YTabs = function(){
    var D = document;
    
    return {
        stopEvent: function(evt){
            this.stopPropagation(evt);
            this.preventDefault(evt);
        },
        stopPropagation: function(evt){
            if (evt.stopPropagation) {
                evt.stopPropagation();
            }
            else {
                evt.cancelBubble = true;
            }
        },
        preventDefault: function(evt){
            if (evt.preventDefault) {
                evt.preventDefault();
            }
            else {
                evt.returnValue = false;
            }
        },
        hasClass: function(elem, className){
            var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
            return has.test(elem.className);
        },
        addClass: function(elem, className){
            if (this.hasClass(elem, className)) {
                return;
            }
            elem.className = [elem.className, className].join(" ");
        },
        removeClass: function(elem, className){
            var replace = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)", "g");
            if (!this.hasClass(elem, className)) {
                return;
            }
            var o = elem.className;
            elem.className = o.replace(replace, " ");
            if (this.hasClass(elem, className)) {
                this.removeClass(elem, className);
            }
        },
        getByClassName: function(className, tag, rootTag){
            var elems = [], i, tempCnt = D.getElementById(rootTag).getElementsByTagName(tag), len = tempCnt.length;
            for (i = 0; i < len; i++) {
                if (YTabs.hasClass(tempCnt[i], className)) {
                    elems.push(tempCnt[i]);
                }
            }
            if (elems.length < 1) {
                return false;
            }
            else {
                return elems;
            }
        },
        tabs: function(){
            var j, len = arguments.length, allTabs;
            for (j = 0; j < len; j += 1) {
                allTabs = arguments[j];
                (function(oTabs){
                    var i, tabCnt = (oTabs.tabId) ? D.getElementById(oTabs.tabId) : (oTabs.tabRoot || null), tabs = (oTabs.tTag) ? tabCnt.getElementsByTagName(oTabs.tTag) : (oTabs.tabs || null), contents = (oTabs.cTag) ? tabCnt.getElementsByTagName(oTabs.cTag) : (oTabs.contents || null);
                    if (tabs && contents) {
                        var length = tabs.length, defaultClass = oTabs.defaultClass || 'current', defaultIndex = oTabs.defaultIndex || 0, lastTab = tabs[defaultIndex], hideAll = oTabs.hideAll || false, lastTabClass = oTabs.lastTabClass || '', lastContent = contents[defaultIndex], previousClass = (oTabs.previousClass || ''), previousClassTab = null, evtName = oTabs.evt || 'mouseover';
                        if(!hideAll){
                            YTabs.addClass(lastTab, defaultClass);
                            lastContent.style.display = 'block';
                        }
                        else{
                            YTabs.removeClass(lastTab, defaultClass);
                            lastContent.style.display = 'none';
                        }
                        for (i = 0; i < length; i += 1) {
                            if (i !== defaultIndex) {
                                YTabs.removeClass(tabs[i], 'current');
                                contents[i].style.display = 'none';
                            }
                            
                            tabs[i]['on' + evtName] = function(index){
                                return function(event){
                                    var currentContent = contents[index];
                                    YTabs.removeClass(lastTab, (YTabs.hasClass(lastTab, defaultClass) ? defaultClass : 'current'));
                                    if (this === tabs[defaultIndex]) {
                                        YTabs.addClass(this, defaultClass);
                                    }
                                    else {
                                        YTabs.addClass(this, 'current');
                                    }
                                    if(index!==0 && previousClass){
                                        if (previousClassTab) {
                                            YTabs.removeClass(previousClassTab, previousClass);
                                        }
                                        YTabs.addClass(tabs[index-1], previousClass);
                                        if((index-1)===defaultIndex){
                                            YTabs.removeClass(tabs[index-1], defaultClass);
                                        }
                                        previousClassTab = (tabs[index-1]);
                                    }
                                    lastContent.style.display = "none";
                                    currentContent.style.display = "block";
                                    lastContent = currentContent;
                                    lastTab = this;
                                    if (evtName === 'click') {
                                        var evt = event || window.event;
                                        YTabs.stopEvent(evt);
                                    }
                                }
                            }(i);
                            if(hideAll && evtName === 'mouseover'){
                                tabs[i]['onmouseout'] = function(index){
                                return function(){
                                    if(lastTab === this){
                                        YTabs.removeClass(this, (YTabs.hasClass(this, defaultClass) ? defaultClass : 'current'));
                                    }
                                    if (previousClassTab) {
                                            YTabs.removeClass(previousClassTab, previousClass);
                                    }
                                    contents[index].style.display = 'none';
                                }
                                }(i);
                            }
                        }
                    }
                })(allTabs);
            }
        }
    }
}();
页面的调用
复制内容到剪贴板
代码:
YTabs.tabs({
    tabId: 'yTabs',
    tTag: 'dd',
    cTag: 'dt'
}, {
        tabs: YTabs.getByClassName('main-tab', 'li', 'main_navigation'),
        contents: YTabs.getByClassName('submenu', 'ul', 'main_navigation')
}, {
    tabId: 'letters',
    tTag: 'li',
    cTag: 'dl',
    hideAll: true,
    previousClass: 'off'
}, {
    tabs: YTabs.getByClassName('main-tab', 'li', 'menus'),
    contents: YTabs.getByClassName('sub-menu', 'ul', 'menus'),
    hideAll: true
}, {
    tabs: document.getElementById('sports').getElementsByTagName('li'),
    contents: YTabs.getByClassName('cnt', 'div', 'yahooskin'),
    evt: 'click',
    defaultClass: 'first',
    previousClass: 'off'
}, {
    tabId: 'news',
    tTag: 'li',
    defaultIndex: 2,
    contents: document.getElementById('newsCnt').getElementsByTagName('ul'),
    evt: 'click'
}, {
    tabId: 'dishes',
    tTag: 'h4',
    cTag: 'p'
}, {
    tabId: 'cmt-list',
    tTag: 'h4',
    contents: YTabs.getByClassName('bd', 'div', 'cmt-list'),
    defaultIndex: 1,
    evt: 'click'
});
最后希望整理的这些东西对大家的开发有帮助!!
  评论这张
 
阅读(412)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017