【原创】滑动门导航类，多种好看且实用的示例，一定来看看！（8月1日更新）

yaohaixiao 楼主

只是为了丰富一下类型，我发现有些刚接触的朋友，如果你把滑动门导航的布局更换一下，就不认识了，我这里就多举写例子把。这个主要的特点其实是在布局，充分利用float元素和position:absolute的特点。这个效果一般的朋友可能还注意不到，我的这里的“更多推荐”是怎么处理的，呵呵，对float和position还不太熟悉的朋友可以看看，看看怎么充分发挥他们的优势来布局，还有就是再展示一下滑动门的潜逃。

[ 本帖最后由 yaohaixiao 于 2009-7-12 08:04 编辑 ]

connorgg

很实用，谢谢分享

haowt

很受用，谢谢楼主了

6836078

yaohaixiao 楼主

呵呵，很高兴对大家有帮助！！

huoyvlan

赞一个，多谢了！

yaohaixiao 楼主

呵呵，我今天有小小的测试了下这个类的扩展性，结合FLASH实现flash的切换，哈哈！！

怎么样？只要多动动脑子，还是有很多别的用处和其他程序结合使用，看看你还可以实现什么效果？

跟flash扩展的代码

1. function flashtab(){
   
2.                 var YTabs = new YAO.simpleTab({
   
3.                         tabs: YAO.getEl('flash-index').getElementsByTagName('a'),
   
4.                         contents: YAO.getEl('flash-info').getElementsByTagName('span'),
   
5.                         evt: 'click'
   
6.                 });
   
7.                 for (var i = 0; i < YTabs.length; ++i) {
   
8.                         YAO.on(YTabs.tabs[i], 'click', function(){
   
9.                                 var flash360 = new Flash(this.href, 'flash-bd', 520, 240); // 这个是引用了swfobject类，我自己做了个包装，这里看不出有什么用，因为我这个包装是为其他功能用的，还可以传其他更多的参数的。
   
10.                         });
    
11.                 }
    
12.         }
    
13.         flashtab();

复制代码

[ 本帖最后由 yaohaixiao 于 2009-7-13 22:38 编辑 ]

eain917

很不错，学习了....

marlon119

不可预料的压缩文档末端～！！！

acoolboy

rar 文档已经坏了。请重新上传。

yaohaixiao 楼主

重新上传了，现在应该好了，我测试过了。

luckywe

兄弟，我下了你的压缩包在本机发现在IE7.0,8.0下js出错啦。（但直接访问你的站没事）

js错误：  your browser does not support XMLHTTP.

yao.js  行988

后面7个效果都失效了。

[ 本帖最后由 luckywe 于 2009-7-14 13:45 编辑 ]

yaohaixiao 楼主

看样子你对AJAX还不了解啊，IE7.0~8.0的安全设置是不允许读本地文件的，而且也直接获得不了服务器返回的status的值的，你可以用FIREFOX本地测试，或者把我的程序在IIS中做一个虚拟目录就会提示这个错误了。

ljmaple

真的很好,学习了!

yaohaixiao 楼主

哎，这年头，什么都用jQuery!!!

gogoman

能不能把display:block/none; 寫成class的呀？

另外，這個凖確點是叫 tab選項卡 吧：）

yaohaixiao 楼主

当然可以，只是这个里只修改了一个属性，我就没有使用class了。

what ever! 随便叫什么名字吧！！看了就知道了。

yaohaixiao 楼主

我很高兴有这么多的朋友觉得效果可以，但是我却没有看到一个朋友对JS代码的优化提出什么建议和意见，我只的具体的意见，没有人看过我的JS代码，觉得有什么问题吗？

我的这种封装还可以怎么优化，没有人有意见吗？真的，我很想听到朋友指点下我，怎么充分使用面向对象的方法来优化JS代码。先谢谢了！！

yaohaixiao 楼主

1. YAO.simpleTab = function(oConfigs){
   
2.         this.tabCnt = (oConfigs.tabId) ? YAO.getEl(oConfigs.tabId) : (oConfigs.tabRoot || null);
   
3.         this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
   
4.         this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
   
5.         this.length = this.tabs.length || 0;
   
6.         this.defaultIndex = oConfigs.defaultIndex || 0;
   
7.         this.lastIndex = this.defaultIndex;
   
8.         this.lastTab = this.tabs[this.lastIndex] || null;
   
9.         this.lastContent = this.contents[this.lastIndex] || null;
   
10.         this.evtName = oConfigs.evt || 'mouseover';
    
11.         this.defaultClass = oConfigs.defaultClass || 'current';
    
12.         this.previousClass = oConfigs.previousClass || '';
    
13.         this.hideAll = oConfigs.hideAll || false;
    
14.         this.auto = oConfigs.auto || false;
    
15.         this.autoSpeed = oConfigs.autoSpeed || 6000;
    
16.         this.fadeUp = oConfigs.fadeUp || false;
    
17.         this.scroll = oConfigs.scroll || false;
    
18.         this.scrollId = oConfigs.scrollId || null;
    
19.         this.scrollSpeed = oConfigs.scrollSpeed || 5;
    
20.     this.direction = oConfigs.direction || 'V';
    
21.         this.activeTag = oConfigs.activeTag || 'IMG';
    
22.         this.ajax = oConfigs.ajax || false;
    
23.         this.aPath = oConfigs.aPath || '';
    
24.        
    
25.         var i, that = this;
    
26.         if (this.tabs && this.contents) {
    
27.             if (this.auto) {
    
28.                         this.timer = setTimeout(function(){
    
29.                                 that.autoChange();
    
30.                         }, that.autoSpeed);
    
31.                 }
    
32.                 if (!this.hideAll) {
    
33.                         YAO.addClass(this.lastTab, this.defaultClass);
    
34.                         if (!this.ajax) {
    
35.                                 this.lastContent.style.display = 'block';
    
36.                         }
    
37.                         else{
    
38.                                 this.ajaxTab(this.lastTab);
    
39.                         }
    
40.                 }
    
41.                 else {
    
42.                         YAO.removeClass(this.lastTab, this.defaultClass);
    
43.                         if (!this.scroll) {
    
44.                                 this.lastContent.style.display = 'none';
    
45.                         }
    
46.                 }
    
47.                 for (i = 0; i < this.length; ++i) {
    
48.                         if (i !== this.defaultIndex && !this.scroll) {
    
49.                                 YAO.removeClass(this.tabs[i], 'current');
    
50.                                 if (!this.ajax) {
    
51.                                         this.contents[i].style.display = 'none';
    
52.                                 }
    
53.                         }
    
54.                         YAO.on(this.tabs[i],this.evtName, function(index){
    
55.                                 return function(event){
    
56.                                         var evt = null, currentContent = that.ajax ? that.contents : (that.contents[index] || null);
    
57.                                        
    
58.                     that.setCurrent.call(that, currentContent, index);
    
59.                                         that.lastIndex = index;
    
60.                                         if (that.auto) {
    
61.                                                 that.isPause = true;
    
62.                                         }
    
63.                                         evt = event || window.event;
    
64.                                         YAO.stopEvent(evt);
    
65.                                 }
    
66.                         }(i));
    
67.                         YAO.on(this.tabs[i],'mouseout', function(index){
    
68.                                 return function(){
    
69.                                         if (that.hideAll && that.evtName === 'mouseover') {
    
70.                                                 if (that.lastTab === this) {
    
71.                                                         YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
    
72.                                                 }
    
73.                                                 if (that.previousClassTab) {
    
74.                                                         YAO.removeClass(that.previousClassTab, that.previousClass);
    
75.                                                 }
    
76.                                                 if (!that.scroll && !that.ajax) {
    
77.                                                         that.contents[index].style.display = 'none';
    
78.                                                 }
    
79.                                         }
    
80.                                         else {
    
81.                                                 if (that.auto) {
    
82.                                                         that.isPause = false;
    
83.                                                 }
    
84.                                         }
    
85.                                 }
    
86.                         }(i));
    
87.                 }
    
88.         }
    
89. };
    
90. YAO.simpleTab.prototype.timer = null;
    
91. YAO.simpleTab.prototype.isPause = false;
    
92. YAO.simpleTab.prototype = {
    
93.         autoChange: function(){
    
94.                 var that = this;
    
95.                 if (!this.isPause) {
    
96.                         var currentContent = null, currentTab = null;
    
97.                         if (this.timer) {
    
98.                                 clearTimeout(this.timer);
    
99.                                 this.timer = null;
    
100.                         }
     
101.                         this.lastIndex = this.lastIndex + 1;
     
102.                         if (this.lastIndex === this.length) {
     
103.                                 this.lastIndex = 0;
     
104.                         }
     
105.                         currentContent = this.ajax ? this.contents : (this.contents[this.lastIndex] || null);
     
106.                         this.setCurrent(currentContent, this.lastIndex);
     
107.                         this.timer = setTimeout(function(){
     
108.                                 that.autoChange();
     
109.                         }, this.autoSpeed);
     
110.                 }
     
111.                 else {
     
112.                         this.timer = setTimeout(function(){
     
113.                                 that.autoChange()
     
114.                         }, this.autoSpeed);
     
115.                         return false;
     
116.                 }
     
117.         },
     
118.         setCurrent: function(curCnt, index){
     
119.                 var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
     
120.                 curTab = this.tabs[index];
     
121.                 YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
     
122.                 if (curTab === this.tabs[this.defaultIndex]) {
     
123.                         YAO.addClass(curTab, this.defaultClass);
     
124.                 }
     
125.                 else {
     
126.                         YAO.addClass(curTab, 'current');
     
127.                 }
     
128.                 if (this.previousClass) {
     
129.                         if (this.previousClassTab) {
     
130.                                 YAO.removeClass(this.previousClassTab, this.previousClass);
     
131.                         }
     
132.                         if (index !== 0) {
     
133.                                 YAO.addClass(this.tabs[index - 1], this.previousClass);
     
134.                                 if ((index - 1) === this.defaultIndex) {
     
135.                                         YAO.removeClass(this.tabs[index - 1], this.defaultClass);
     
136.                                 }
     
137.                                 this.previousClassTab = (this.tabs[index - 1]);
     
138.                         }
     
139.                 }
     
140.                 if (!this.scroll && !this.ajax) {
     
141.                         if (this.lastContent) {
     
142.                                 this.lastContent.style.display = "none";
     
143.                         }
     
144.                         if (curCnt) {
     
145.                                 curCnt.style.display = "block";
     
146.                         }
     
147.                 }
     
148.                
     
149.                 if (this.fadeUp) {
     
150.                          activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
     
151.                         if (this.lastContent !== curCnt) {
     
152.                                 YAO.fadeUp(activeObj);
     
153.                         }
     
154.                 }
     
155.                 else {
     
156.                         if (this.scroll) {
     
157.                                 activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
     
158.                                 if(this.direction === 'V'){
     
159.                                     itemHeight = activeObj.offsetHeight;
     
160.                                     scrollHeight = -(index * itemHeight);
     
161.                                 }
     
162.                                 else{
     
163.                                     itemWidth = activeObj.offsetWidth;
     
164.                                     scrollWidth = -(index * itemWidth);
     
165.                                 }
     
166.                                 YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
     
167.                         }
     
168.                 }
     
169.                 if (!this.ajax) {
     
170.                         this.lastContent = curCnt;
     
171.                 }
     
172.                 else {
     
173.                         this.ajaxTab(curTab);
     
174.                 }
     
175.                 this.lastTab = curTab;
     
176.         },
     
177.         ajaxTab: function(curTab){
     
178.                 var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
     
179.                 ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
     
180.                 url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
     
181.                 YAO.ajaxRequest(url, cnt, cnt.innerHTML);
     
182.         }
     
183. };       

复制代码

yaohaixiao 楼主

呵呵，发现现在写tab导航的人不少啊！！

Seasonchen

强！

zuozeyu

不错
收藏了

闪电骑士

反复看了好几遍，被震撼了。

Seasonchen

顶一下

oneyou13

很棒，必须收藏了

dqbs2

受教了！~~

fhrd123

不错，顶一下。

yaohaixiao 楼主

只有整了个滚动分页的效果，看看吧！！

代码调整优化了下：

1. YAO.simpleTab = function(oConfigs){
   
2.         this.tabCnt = (oConfigs.tabId) ? YAO.getEl(oConfigs.tabId) : (oConfigs.tabRoot || null);
   
3.         this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
   
4.         this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
   
5.         this.length = this.tabs.length || 0;
   
6.         this.defaultIndex = oConfigs.defaultIndex || 0;
   
7.         this.lastIndex = this.defaultIndex;
   
8.         this.lastTab = this.tabs[this.lastIndex] || null;
   
9.         this.lastContent = this.contents[this.lastIndex] || null;
   
10.         this.evtName = oConfigs.evt || 'mouseover';
    
11.         this.defaultClass = oConfigs.defaultClass || 'current';
    
12.         this.previousClass = oConfigs.previousClass || '';
    
13.         this.hideAll = oConfigs.hideAll || false;
    
14.         this.auto = oConfigs.auto || false;
    
15.         this.autoSpeed = oConfigs.autoSpeed || 6000;
    
16.         this.fadeUp = oConfigs.fadeUp || false;
    
17.         this.scroll = oConfigs.scroll || false;
    
18.         this.scrollId = oConfigs.scrollId || null;
    
19.         this.scrollSpeed = oConfigs.scrollSpeed || 5;
    
20.     this.direction = oConfigs.direction || 'V';
    
21.         this.activeTag = oConfigs.activeTag || 'IMG';
    
22.         this.stepHeight = oConfigs.stepHeight || 0;
    
23.         this.stepWidth = oConfigs.stepWidth || 0;
    
24.         this.ajax = oConfigs.ajax || false;
    
25.         this.aPath = oConfigs.aPath || '';
    
26.        
    
27.         var i, that = this,scrollWidth,scrollHeight,activeObj=null,itemHeight=0,itemWidth=0;
    
28.         if (this.tabs && this.contents) {
    
29.             if (this.auto) {
    
30.                         this.timer = setTimeout(function(){
    
31.                                 that.autoChange();
    
32.                         }, that.autoSpeed);
    
33.                 }
    
34.                 if (!this.hideAll) {
    
35.                         YAO.addClass(this.lastTab, this.defaultClass);
    
36.                         if (!this.ajax && !this.scroll) {
    
37.                                 if (this.lastContent) {
    
38.                                         this.lastContent.style.display = 'block';
    
39.                                 }
    
40.                         }
    
41.                         if (this.ajax) {
    
42.                                 this.ajaxTab(this.lastTab);
    
43.                         }
    
44.                         if (this.scroll) {
    
45.                                 this.scrollCnt((this.lastContent || this.contents), this.defaultIndex);
    
46.                         }
    
47.                 }
    
48.                 else {
    
49.                         YAO.removeClass(this.lastTab, this.defaultClass);
    
50.                 }
    
51.                 for (i = 0; i < this.length; ++i) {
    
52.                         if (i !== this.defaultIndex) {
    
53.                                 YAO.removeClass(this.tabs[i], 'current');
    
54.                                 if (!this.ajax && !this.scroll) {
    
55.                                         this.contents[i].style.display = 'none';
    
56.                                 }
    
57.                         }
    
58.                         YAO.on(this.tabs[i],this.evtName, function(index){
    
59.                                 return function(event){
    
60.                                         var evt = null, currentContent = (that.ajax || (that.scroll && (that.stepHeight || that.stepWidth))) ? that.contents : (that.contents[index] || null);
    
61.                                        
    
62.                     that.setCurrent.call(that, currentContent, index);
    
63.                                         that.lastIndex = index;
    
64.                                         if (that.auto) {
    
65.                                                 that.isPause = true;
    
66.                                         }
    
67.                                         evt = event || window.event;
    
68.                                         YAO.stopEvent(evt);
    
69.                                 }
    
70.                         }(i));
    
71.                         YAO.on(this.tabs[i],'mouseout', function(index){
    
72.                                 return function(){
    
73.                                         if (that.hideAll && that.evtName === 'mouseover') {
    
74.                                                 if (that.lastTab === this) {
    
75.                                                         YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
    
76.                                                 }
    
77.                                                 if (that.previousClassTab) {
    
78.                                                         YAO.removeClass(that.previousClassTab, that.previousClass);
    
79.                                                 }
    
80.                                                 if (!that.scroll && !that.ajax) {
    
81.                                                         that.contents[index].style.display = 'none';
    
82.                                                 }
    
83.                                         }
    
84.                                         else {
    
85.                                                 if (that.auto) {
    
86.                                                         that.isPause = false;
    
87.                                                 }
    
88.                                         }
    
89.                                 }
    
90.                         }(i));
    
91.                 }
    
92.         }
    
93. };
    
94. YAO.simpleTab.prototype.timer = null;
    
95. YAO.simpleTab.prototype.isPause = false;
    
96. YAO.simpleTab.prototype = {
    
97.         autoChange: function(){
    
98.                 var that = this;
    
99.                 if (!this.isPause) {
    
100.                         var currentContent = null, currentTab = null;
     
101.                         if (this.timer) {
     
102.                                 clearTimeout(this.timer);
     
103.                                 this.timer = null;
     
104.                         }
     
105.                         this.lastIndex = this.lastIndex + 1;
     
106.                         if (this.lastIndex === this.length) {
     
107.                                 this.lastIndex = 0;
     
108.                         }
     
109.                         currentContent = this.ajax ? this.contents : (this.contents[this.lastIndex] || null);
     
110.                         this.setCurrent(currentContent, this.lastIndex);
     
111.                         this.timer = setTimeout(function(){
     
112.                                 that.autoChange();
     
113.                         }, this.autoSpeed);
     
114.                 }
     
115.                 else {
     
116.                         this.timer = setTimeout(function(){
     
117.                                 that.autoChange()
     
118.                         }, this.autoSpeed);
     
119.                         return false;
     
120.                 }
     
121.         },
     
122.         setCurrent: function(curCnt, index){
     
123.                 var activeObj = null;
     
124.                 curTab = this.tabs[index];
     
125.                 YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
     
126.                 if (curTab === this.tabs[this.defaultIndex]) {
     
127.                         YAO.addClass(curTab, this.defaultClass);
     
128.                 }
     
129.                 else {
     
130.                         YAO.addClass(curTab, 'current');
     
131.                 }
     
132.                 if (this.previousClass) {
     
133.                         if (this.previousClassTab) {
     
134.                                 YAO.removeClass(this.previousClassTab, this.previousClass);
     
135.                         }
     
136.                         if (index !== 0) {
     
137.                                 YAO.addClass(this.tabs[index - 1], this.previousClass);
     
138.                                 if ((index - 1) === this.defaultIndex) {
     
139.                                         YAO.removeClass(this.tabs[index - 1], this.defaultClass);
     
140.                                 }
     
141.                                 this.previousClassTab = (this.tabs[index - 1]);
     
142.                         }
     
143.                 }
     
144.                 if (!this.scroll && !this.ajax) {
     
145.                         if (this.lastContent) {
     
146.                                 this.lastContent.style.display = "none";
     
147.                         }
     
148.                         if (curCnt) {
     
149.                                 curCnt.style.display = "block";
     
150.                         }
     
151.                 }
     
152.                
     
153.                 if (this.fadeUp) {
     
154.                          activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
     
155.                         if (this.lastContent !== curCnt) {
     
156.                                 YAO.fadeUp(activeObj);
     
157.                         }
     
158.                 }
     
159.                 else {
     
160.                         if (this.scroll) {
     
161.                                 this.scrollCnt(curCnt, index);
     
162.                         }
     
163.                 }
     
164.                 if (!this.ajax) {
     
165.                         this.lastContent = curCnt;
     
166.                 }
     
167.                 else {
     
168.                         if (this.ajax) {
     
169.                                 this.ajaxTab(curTab);
     
170.                         }
     
171.                 }
     
172.                 this.lastTab = curTab;
     
173.         },
     
174.         scrollCnt: function(curCnt,index){
     
175.                 var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
     
176.                 if (this.activeTag) {
     
177.                         activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
     
178.                 }
     
179.                 if (this.direction === 'V') {
     
180.                         itemHeight = activeObj ? activeObj.offsetHeight : this.stepHeight;
     
181.                         scrollHeight = -(index * itemHeight);
     
182.                 }
     
183.                 else {
     
184.                         itemWidth = activeObj ? activeObj.offsetWidth : this.stepWidth;
     
185.                         scrollWidth = -(index * itemWidth);
     
186.                 }
     
187.                 YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
     
188.         },
     
189.         ajaxTab: function(curTab){
     
190.                 var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
     
191.                 ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
     
192.                 url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
     
193.                 YAO.ajaxRequest(url, cnt, cnt.innerHTML);
     
194.         }
     
195. };       

复制代码

之前疏忽了滚动的默认定位，而且现在你可以直接设置一行或一列的滚动距离，当然你不设置，程序跟根据你的其他设置，自行计算。

[ 本帖最后由 yaohaixiao 于 2009-7-17 09:23 编辑 ]

wangchengbao

蛮实用的，收藏下载了，谢谢楼主的用心。

yaohaixiao 楼主

呵呵，我还会持续更新的