收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版

 找回密码
 注册

只需一步，快速开始

蓝色理想 最新研发动态 新增登录提醒插件 - 用至我的站点 地图任务一定要做 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭，选一款蓝色理想的个性T恤吧！

MIUI手机主题设计大赛，奔驰大奖等你拿！ 想加薪？！蓝色理想招聘提供你更多机会 悬赏答疑，赚取积分兑奖品！

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 【原创】滑动门导航类，多种好看且实用的示例，一定来看 ...
12345678910... 13下一页
返回列表
楼主: yaohaixiao

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

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-5 14:30:59 |显示全部楼层

今天把代码重构了下，现在的写法应该比较清晰，相信有些基础的朋友都看得懂的

简单的加了点注释

核心代码
  1. YAO.simpleTab = function(oConfigs){
  2.         /* ==================================================================================================================================================================================================================
  3.          * 初始化配置
  4.          * ==================================================================================================================================================================================================================
  5.          * tabCnt：tabs（标签）的父节点 <Object> <可选> 值：oConfigs.tabId - 节点ID、oConfigs.tabRoot - 节点对象、nul - 空值（默认值）
  6.          * tabs：全部导航tabs <Object> <必须> 值：oConfigs.cTag - （通过获得getElementsByTagName获取tabCnt下的所有）标签的tagName、oConfigs.tabs - 所有标签节点对象、nul - 空值（默认值）
  7.          * contents：全部需要显示的（内容）节点 <Object> <必须> 值：oConfigs.cTag - （通过获得getElementsByTagName获取tabCnt下的所有）内容的tagName、oConfigs.contents - 全部需要显示的（内容）节点对象、null - 空值（默认值）
  8.          * length：标签和显示内容的长度（目前只能处理相同数量的，因为主要功能是针对tab导航显示，而不是导航菜单）<Number> <可选> 值：tabs.length - 所有标签对象的长度、0 - 默认没有（如果设置tabs错误时启动）
  9.          * defaultIndex：默认显示的标签和内容的索引 <Number> <可选> 值：oConfigs.defaultIndex - 索引值、0 - 默认为显示第一项
  10.          * lastIndex：当前显示的项的索引值 <Number> <可选> 值：默认为初始项索引值
  11.          * lastTab：上一个选中的标签节点 <Object> <可选> 值：this.tabs[this.lastIndex]、null - 默认没有（如果设置tabs错误时启动）
  12.          * lastContent：上一个显示的内容节点 <Object> <可选> 值：this.contents[this.lastIndex]、null - 默认没有（如果设置contents错误时启动）
  13.          * evtName：标签的出发事件 <String> <可选> 值：oConfigs.evt - 一般为click、mouseover - 默认值
  14.          * defaultClass：默认标签项的className <String> <可选> 值：oConfigs.defaultClass - className、current - 默认className
  15.          * previousClass：当前标签前一个标签的显示样式（针对类似YAHOO标签设置） <String> <可选> 值：oConfigs.previousClass、默认为空
  16.          * hideAll：隐藏全部（当用于菜单显示需要设置） <Boolean> <可选> 值：oConfigs.hideAll（true）、false（默认值）
  17.          * auto：是否自动切换 <Boolean> <可选> 值：oConfigs.auto（一般为true）、false - 默认值，默认是不自动切换的
  18.          * speed：自动切换时间间隔 <Number> <可选> 值：oConfigs.speed、6000 - 默认值，默认6秒切换一次
  19.          * fadeUp：自动切换是否渐显 <Boolean> <可选> 值：oConfigs.fadeUp、false - 默认值，默认没有渐变过度效果
  20.          * =============================================================================================================================================================================================================== */
  21.         this.tabCnt = (oConfigs.tabId) ? YAO.get(oConfigs.tabId) : (oConfigs.tabRoot || null);
  22.         this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
  23.         this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
  24.         this.length = this.tabs.length || 0;
  25.         this.defaultIndex = oConfigs.defaultIndex || 0;
  26.         this.lastIndex = this.defaultIndex;
  27.         this.lastTab = this.tabs[this.lastIndex] || null;
  28.         this.lastContent = this.contents[this.lastIndex] || null;
  29.         this.evtName = oConfigs.evt || 'mouseover';
  30.         this.defaultClass = oConfigs.defaultClass || 'current';
  31.         this.previousClass = oConfigs.previousClass || '';
  32.         this.hideAll = oConfigs.hideAll || false;
  33.         this.auto = oConfigs.auto || false;
  34.         this.speed = oConfigs.speed || 6000;
  35.         this.fadeUp = oConfigs.fadeUp || false;
  36.        
  37.         /*
  38.          * 根据配置，执行各项功能
  39.          */
  40.         var i, that = this;
  41.         if (this.auto) {
  42.                 this.timer = setTimeout(function(){
  43.                         that.autoChange();
  44.                 }, that.speed);
  45.         }
  46.         if (this.tabs && this.contents) {
  47.                 if (!this.hideAll) {
  48.                         YAO.addClass(this.lastTab, this.defaultClass);
  49.                         this.lastContent.style.display = 'block';
  50.                 }
  51.                 else {
  52.                         YAO.removeClass(this.lastTab, this.defaultClass);
  53.                         this.lastContent.style.display = 'none';
  54.                 }
  55.                 for (i = 0; i < this.length; ++i) {
  56.                         if (i !== this.defaultIndex) {
  57.                                 YAO.removeClass(this.tabs[i], 'current');
  58.                                 this.contents[i].style.display = 'none';
  59.                         }
  60.                        
  61.                         this.tabs[i]['on' + this.evtName] = function(index){
  62.                                 return function(event){
  63.                                         var evt = null, currentContent = that.contents[index], currentTab = this;
  64.                                         that.setCurrent.call(that, this, currentContent, index);
  65.                                         that.lastIndex = index;
  66.                                         if (that.auto) {
  67.                                                 that.isPause = true;
  68.                                         }
  69.                                         evt = event || window.event;
  70.                                         YAO.stopEvent(evt);
  71.                                 }
  72.                         }(i);
  73.                         this.tabs[i]['onmouseout'] = function(index){
  74.                                 return function(){
  75.                                         if (that.hideAll && that.evtName === 'mouseover') {
  76.                                                 if (that.lastTab === this) {
  77.                                                         YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
  78.                                                 }
  79.                                                 if (that.previousClassTab) {
  80.                                                         YAO.removeClass(that.previousClassTab, that.previousClass);
  81.                                                 }
  82.                                                 that.contents[index].style.display = 'none';
  83.                                         }
  84.                                         else {
  85.                                                 if (that.auto) {
  86.                                                         that.isPause = false;
  87.                                                 }
  88.                                         }
  89.                                 }
  90.                         }(i);
  91.                 }
  92.         }
  93. };
  94. /*
  95. * 初始化设置
  96. * timer：制动切换的定时器
  97. * isPause：是否暂停切换
  98. */
  99. YAO.simpleTab.prototype.timer = null;
  100. YAO.simpleTab.prototype.isPause = false;
  101. YAO.simpleTab.prototype = {
  102.         /*
  103.          * 自动切换
  104.          */
  105.         autoChange: function(){
  106.                 var that = this;
  107.                 if (!this.isPause) {
  108.                         var currentContent = null, currentTab = null;
  109.                         if (this.timer) {
  110.                                 clearTimeout(this.timer);
  111.                         }
  112.                         this.lastIndex = this.lastIndex + 1;
  113.                         if (this.lastIndex === this.length) {
  114.                                 this.lastIndex = 0;
  115.                         }
  116.                         currentContent = this.contents[this.lastIndex];
  117.                         currentTab = this.tabs[this.lastIndex];
  118.                         this.setCurrent(currentTab, currentContent, this.lastIndex);
  119.                         this.timer = setTimeout(function(){
  120.                                 that.autoChange();
  121.                         }, this.speed);
  122.                 }
  123.                 else {
  124.                         this.timer = setTimeout(function(){
  125.                                 that.autoChange()
  126.                         }, this.speed);
  127.                         return false;
  128.                 }
  129.         },
  130.         /*
  131.          * 设置当前标签样式和当前显示内容
  132.          */
  133.         setCurrent: function(curTab, curCnt, index){
  134.                 var currentImage = null;
  135.                 YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
  136.                 if (curTab === this.tabs[this.defaultIndex]) {
  137.                         YAO.addClass(curTab, this.defaultClass);
  138.                 }
  139.                 else {
  140.                         YAO.addClass(curTab, 'current');
  141.                 }
  142.                 if (this.previousClass) {
  143.                         if (this.previousClassTab) {
  144.                                 YAO.removeClass(this.previousClassTab, this.previousClass);
  145.                         }
  146.                         if (index !== 0) {
  147.                                 YAO.addClass(this.tabs[index - 1], this.previousClass);
  148.                                 if ((index - 1) === this.defaultIndex) {
  149.                                         YAO.removeClass(this.tabs[index - 1], this.defaultClass);
  150.                                 }
  151.                                 this.previousClassTab = (this.tabs[index - 1]);
  152.                         }
  153.                 }
  154.                 this.lastContent.style.display = "none";
  155.                 curCnt.style.display = "block";
  156.                 if (this.fadeUp) {
  157.                         if (this.lastContent !== curCnt) {
  158.                                 currentImage = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
  159.                         }
  160.                         YAO.fadeUp(currentImage);
  161.                 }
  162.                 this.lastContent = curCnt;
  163.                 this.lastTab = curTab;
  164.         }
  165. };       
复制代码


以前把整个对象当那个方法的私有方法写到闭包里了，比较难看懂，现在发对象分离出来，采用传统的构造函数的写法，相信大家都可以看明白的。

[ 本帖最后由 yaohaixiao 于 2009-7-5 14:46 编辑 ]
YAOHAIXAIO.COM
西部数码云主机4G内存500G仅需423元

使用道具 举报

balldn　
帖子
58
体力
208
威望
0
居住地
广东省 东莞市
发表于 2009-7-5 18:36:06 |显示全部楼层
好强大。。。
                  楼主真伟大！
      强烈顶上。。好贴，给顶！·
租服务器，上51IDC

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 09:05:08 |显示全部楼层

回复 92# balldn 的帖子

呵呵，有把TB的导航整进去了，现在还加了滚动的自动切换效果，不过还有点BUG，在两个sample之间快速切换，就会出问题，正在想解决办法，也请高手指点下





完整代码
  1. var YAO = function(){
  2.         var A = '[object Array]', D = document, IE = navigator.userAgent.match(/MSIE\s([^;]*)/), nt = "nodeType", OP = Object.prototype;
  3.        
  4.         return {
  5.                 isArray: function(s){
  6.                    return OP.toString.apply(s) === A;
  7.             },
  8.                 isString: function(s){
  9.                    return typeof s === 'string';
  10.             },
  11.                 stopEvent: function(evt){
  12.                         this.stopPropagation(evt);
  13.                         this.preventDefault(evt);
  14.                 },
  15.                 stopPropagation: function(evt){
  16.                         if (evt.stopPropagation) {
  17.                                 evt.stopPropagation();
  18.                         }
  19.                         else {
  20.                                 evt.cancelBubble = true;
  21.                         }
  22.                 },
  23.                 preventDefault: function(evt){
  24.                         if (evt.preventDefault) {
  25.                                 evt.preventDefault();
  26.                         }
  27.                         else {
  28.                                 evt.returnValue = false;
  29.                         }
  30.                 },
  31.                 get: function(elem){
  32.                         var elemID, E, m, i, k, length, len;
  33.                         if (elem) {
  34.                                 if (elem[nt] || elem.item) {
  35.                                         return elem;
  36.                                 }
  37.                                 if (YAO.isString(elem)) {
  38.                                         elemID = elem;
  39.                                         elem = D.getElementById(elem);
  40.                                         if (elem && elem.id === elemID) {
  41.                                                 return elem;
  42.                                         }
  43.                                         else {
  44.                                                 if (elem && elem.all) {
  45.                                                         elem = null;
  46.                                                         E = D.all[elemID];
  47.                                                         for (i = 0, len = E.length; i < len; i += 1) {
  48.                                                                 if (E[i].id === elemID) {
  49.                                                                         return E[i];
  50.                                                                 }
  51.                                                         }
  52.                                                 }
  53.                                         }
  54.                                         return elem;
  55.                                 }
  56.                                 else {
  57.                                         if (elem.DOM_EVENTS) {
  58.                                                 elem = elem.get("element");
  59.                                         }
  60.                                         else {
  61.                                                 if (YAO.isArray(elem)) {
  62.                                                         m = [];
  63.                                                         for (k = 0, length = elem.length; k < length; k += 1) {
  64.                                                                 m[m.length] = YAO.get(elem[k]);
  65.                                                         }
  66.                                                         return m;
  67.                                                 }
  68.                                         }
  69.                                 }
  70.                         }
  71.                         return null;
  72.                 },
  73.                 hasClass: function(elem, className){
  74.                         var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
  75.                         return has.test(elem.className);
  76.                 },
  77.                 addClass: function(elem, className){
  78.                         if (this.hasClass(elem, className)) {
  79.                                 return;
  80.                         }
  81.                         elem.className = [elem.className, className].join(" ");
  82.                 },
  83.                 removeClass: function(elem, className){
  84.                         var replace = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)", "g");
  85.                         if (!this.hasClass(elem, className)) {
  86.                                 return;
  87.                         }
  88.                         var o = elem.className;
  89.                         elem.className = o.replace(replace, " ");
  90.                         if (this.hasClass(elem, className)) {
  91.                                 this.removeClass(elem, className);
  92.                         }
  93.                 },
  94.                 replaceClass: function(m, k, j){
  95.                         if (k === j) {
  96.                                 return false;
  97.                         }
  98.                         var l = new RegExp("(?:^|\\s+)" + k + "(?:\\s+|$)", "g");
  99.                         if (!this.hasClass(m, k)) {
  100.                                 this.addClass(m, j);
  101.                                 return;
  102.                         }
  103.                         m.className = m.className.replace(l, " " + j + " ");
  104.                         if (this.hasClass(m, k)) {
  105.                                 this.replaceClass(m, k, j);
  106.                         }
  107.                 },
  108.                 getByClassName: function(className, tag, rootTag){
  109.                         var elems = [], i, tempCnt = D.getElementById(rootTag).getElementsByTagName(tag), len = tempCnt.length;
  110.                         for (i = 0; i < len; i++) {
  111.                                 if (YAO.hasClass(tempCnt[i], className)) {
  112.                                         elems.push(tempCnt[i]);
  113.                                 }
  114.                         }
  115.                         if (elems.length < 1) {
  116.                                 return false;
  117.                         }
  118.                         else {
  119.                                 return elems;
  120.                         }
  121.                 },
  122.                 setOpacity: function(el, val){
  123.                         if (IE) {
  124.                                 if (YAO.isString(el.style.filter)) {
  125.                                         el.style.filter = 'alpha(opacity=' + val * 100 + ')';
  126.                                         if (!el.currentStyle || !el.currentStyle.hasLayout) {
  127.                                                 el.style.zoom = 1;
  128.                                         }
  129.                                 }
  130.                         }
  131.                         else {
  132.                                 el.style['opacity'] = val;
  133.                         }
  134.                 },
  135.                 YTabs: function(){
  136.                         var j, len = arguments.length, sigleTab = [];
  137.                         for (j = 0; j < len; ++j) {
  138.                                 sigleTab[j] = new YAO.simpleTab(arguments[j]);
  139.                         }
  140.                 },
  141.                 fadeUp: function(elem){
  142.                         if (elem) {
  143.                                 var level = 0, fade = function(){
  144.                                         var timer = null;
  145.                                         level += 0.05;
  146.                                         if (timer) {
  147.                                                 clearTimeout(timer);
  148.                                                 timer = null;
  149.                                         }
  150.                                         if (level > 1) {
  151.                                                 YAO.setOpacity(elem, 1);
  152.                                                 return false;
  153.                                         }
  154.                                         else {
  155.                                                 YAO.setOpacity(elem, level);
  156.                                         }
  157.                                         timer = setTimeout(fade, 50);
  158.                                 };
  159.                                 fade();
  160.                         }
  161.                 },
  162.                 zebra: function(){
  163.                         var j,length = arguments.length;
  164.                         for (j = 0; j < length;  ++j) {
  165.                                 (function(config){
  166.                                         var root = YAO.get(config.rootTag) || (config.root || null),rows = root.getElementsByTagName(config.rowTag) || (config.rows || null), i, len = rows.length, lastClass = '';
  167.                                         if (root && rows && len > 1) {
  168.                                                 for (var i = 0; i < len; ++i) {
  169.                                                         rows[i].className = i % 2 == 0 ? 'even' : 'odd';
  170.                                                         rows[i].onmouseover = function(){
  171.                                                                 lastClass = this.className;
  172.                                                                 YAO.replaceClass(this,lastClass,'hover');
  173.                                                         };
  174.                                                         rows[i].onmouseout = function(){
  175.                                                                 YAO.replaceClass(this,'hover',lastClass);
  176.                                                         };
  177.                                                 }
  178.                                         }
  179.                                         else{
  180.                                                 return false;
  181.                                         }
  182.                                 })(arguments[j]);
  183.                         }
  184.                 },
  185.                 moveElement: function(element, finalX, finalY, speed){
  186.                         var elem = (typeof element === 'string') ? YAO.get(element) : element, style = null;
  187.                         if (elem) {
  188.                                 var move = function(){
  189.                                         var timer = null, dist = 0;
  190.                                         style = elem.style;
  191.                                         if (timer) {
  192.                                                 clearTimeout(timer);
  193.                                                 timer = null;
  194.                                         }
  195.                                         if (!style.left) {
  196.                                                 style.left = '0';
  197.                                         }
  198.                                         if (!style.top) {
  199.                                                 style.top = '0';
  200.                                         }
  201.                                         var xpos = parseInt(style.left, 10);
  202.                                         var ypos = parseInt(style.top, 10);
  203.                                         if (xpos == finalX && ypos == finalY) {
  204.                                                 return true;
  205.                                         }
  206.                                         if (xpos < finalX) {
  207.                                                 dist = Math.ceil((finalX - xpos) / 10);
  208.                                                 xpos = xpos + dist;
  209.                                         }
  210.                                         if (xpos > finalX) {
  211.                                                 dist = Math.ceil((xpos - finalX) / 10);
  212.                                                 xpos = xpos - dist;
  213.                                         }
  214.                                         if (ypos < finalY) {
  215.                                                 dist = Math.ceil((finalY - ypos) / 10);
  216.                                                 ypos = ypos + dist;
  217.                                         }
  218.                                         if (ypos > finalY) {
  219.                                                 dist = Math.ceil((ypos - finalY) / 10);
  220.                                                 ypos = ypos - dist;
  221.                                         }
  222.                                         style.left = xpos + 'px';
  223.                                         style.top = ypos + 'px';
  224.                                         timer = setTimeout(move, speed);
  225.                                 };
  226.                                 move();
  227.                         }
  228.                 }
  229.         };
  230. }();
  231. YAO.simpleTab = function(oConfigs){
  232.         /* ==================================================================================================================================================================================================================
  233.          * 初始化配置
  234.          * ==================================================================================================================================================================================================================
  235.          * tabCnt：tabs（标签）的父节点 <Object> <可选> 值：oConfigs.tabId - 节点ID、oConfigs.tabRoot - 节点对象、nul - 空值（默认值）
  236.          * tabs：全部导航tabs <Object> <必须> 值：oConfigs.cTag - （通过获得getElementsByTagName获取tabCnt下的所有）标签的tagName、oConfigs.tabs - 所有标签节点对象、nul - 空值（默认值）
  237.          * contents：全部需要显示的（内容）节点 <Object> <必须> 值：oConfigs.cTag - （通过获得getElementsByTagName获取tabCnt下的所有）内容的tagName、oConfigs.contents - 全部需要显示的（内容）节点对象、null - 空值（默认值）
  238.          * length：标签和显示内容的长度（目前只能处理相同数量的，因为主要功能是针对tab导航显示，而不是导航菜单）<Number> <可选> 值：tabs.length - 所有标签对象的长度、0 - 默认没有（如果设置tabs错误时启动）
  239.          * defaultIndex：默认显示的标签和内容的索引 <Number> <可选> 值：oConfigs.defaultIndex - 索引值、0 - 默认为显示第一项
  240.          * lastIndex：当前显示的项的索引值 <Number> <可选> 值：默认为初始项索引值
  241.          * lastTab：上一个选中的标签节点 <Object> <可选> 值：this.tabs[this.lastIndex]、null - 默认没有（如果设置tabs错误时启动）
  242.          * lastContent：上一个显示的内容节点 <Object> <可选> 值：this.contents[this.lastIndex]、null - 默认没有（如果设置contents错误时启动）
  243.          * evtName：标签的出发事件 <String> <可选> 值：oConfigs.evt - 一般为click、mouseover - 默认值
  244.          * defaultClass：默认标签项的className <String> <可选> 值：oConfigs.defaultClass - className、current - 默认className
  245.          * previousClass：当前标签前一个标签的显示样式（针对类似YAHOO标签设置） <String> <可选> 值：oConfigs.previousClass、默认为空
  246.          * hideAll：隐藏全部（当用于菜单显示需要设置） <Boolean> <可选> 值：oConfigs.hideAll（true）、false（默认值）
  247.          * auto：是否自动切换 <Boolean> <可选> 值：oConfigs.auto（一般为true）、false - 默认值，默认是不自动切换的
  248.          * speed：自动切换时间间隔 <Number> <可选> 值：oConfigs.speed、6000 - 默认值，默认6秒切换一次
  249.          * fadeUp：自动切换是否渐显 <Boolean> <可选> 值：oConfigs.fadeUp、false - 默认值，默认没有渐变过度效果
  250.          * =============================================================================================================================================================================================================== */
  251.         this.tabCnt = (oConfigs.tabId) ? YAO.get(oConfigs.tabId) : (oConfigs.tabRoot || null);
  252.         this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
  253.         this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
  254.         this.length = this.tabs.length || 0;
  255.         this.defaultIndex = oConfigs.defaultIndex || 0;
  256.         this.lastIndex = this.defaultIndex;
  257.         this.lastTab = this.tabs[this.lastIndex] || null;
  258.         this.lastContent = this.contents[this.lastIndex] || null;
  259.         this.evtName = oConfigs.evt || 'mouseover';
  260.         this.defaultClass = oConfigs.defaultClass || 'current';
  261.         this.previousClass = oConfigs.previousClass || '';
  262.         this.hideAll = oConfigs.hideAll || false;
  263.         this.auto = oConfigs.auto || false;
  264.         this.isPause = false;
  265.         this.speed = oConfigs.speed || 6000;
  266.         this.fadeUp = oConfigs.fadeUp || false;
  267.         this.scroll = oConfigs.scroll || false;
  268.         this.scrollId = oConfigs.scrollId || null;
  269.         this.scrollSpeed = oConfigs.scrollSpeed || 5;
  270.         /*
  271.          * 根据配置，执行各项功能
  272.          */
  273.         var i, that = this;
  274.         if (this.auto) {
  275.                 this.timer = setTimeout(function(){
  276.                         that.autoChange();
  277.                 }, that.speed);
  278.         }
  279.         if (this.tabs && this.contents) {
  280.                 if (!this.hideAll) {
  281.                         YAO.addClass(this.lastTab, this.defaultClass);
  282.                         this.lastContent.style.display = 'block';
  283.                 }
  284.                 else {
  285.                         YAO.removeClass(this.lastTab, this.defaultClass);
  286.                         if (!this.scroll) {
  287.                                 this.lastContent.style.display = 'none';
  288.                         }
  289.                 }
  290.                 for (i = 0; i < this.length; ++i) {
  291.                         if (i !== this.defaultIndex && !this.scroll) {
  292.                                 YAO.removeClass(this.tabs[i], 'current');
  293.                                 this.contents[i].style.display = 'none';
  294.                         }
  295.                         this.tabs[i]['on' + this.evtName] = function(index){
  296.                                 return function(event){
  297.                                         var evt = null, currentContent = that.contents[index], currentTab = this;
  298.                                         that.setCurrent.call(that, this, currentContent, index);
  299.                                         that.lastIndex = index;
  300.                                         if (that.auto) {
  301.                                                 that.isPause = true;
  302.                                         }
  303.                                         evt = event || window.event;
  304.                                         YAO.stopEvent(evt);
  305.                                 }
  306.                         }(i);
  307.                         this.tabs[i]['onmouseout'] = function(index){
  308.                                 return function(){
  309.                                         if (that.hideAll && that.evtName === 'mouseover') {
  310.                                                 if (that.lastTab === this) {
  311.                                                         YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
  312.                                                 }
  313.                                                 if (that.previousClassTab) {
  314.                                                         YAO.removeClass(that.previousClassTab, that.previousClass);
  315.                                                 }
  316.                                                 if (!that.scroll) {
  317.                                                         that.contents[index].style.display = 'none';
  318.                                                 }
  319.                                         }
  320.                                         else {
  321.                                                 if (that.auto) {
  322.                                                         that.isPause = false;
  323.                                                 }
  324.                                         }
  325.                                 }
  326.                         }(i);
  327.                 }
  328.         }
  329. };
  330. /*
  331. * 初始化设置
  332. * timer：制动切换的定时器
  333. * isPause：是否暂停切换
  334. */
  335. YAO.simpleTab.prototype.timer = null;
  336. YAO.simpleTab.prototype.isPause = false;
  337. YAO.simpleTab.prototype = {
  338.         /*
  339.          * 自动切换
  340.          */
  341.         autoChange: function(){
  342.                 var that = this;
  343.                 if (!this.isPause) {
  344.                         var currentContent = null, currentTab = null;
  345.                         if (this.timer) {
  346.                                 clearTimeout(this.timer);
  347.                                 this.timer = null;
  348.                         }
  349.                         this.lastIndex = this.lastIndex + 1;
  350.                         if (this.lastIndex === this.length) {
  351.                                 this.lastIndex = 0;
  352.                         }
  353.                         currentContent = this.contents[this.lastIndex];
  354.                         currentTab = this.tabs[this.lastIndex];
  355.                         this.setCurrent(currentTab, currentContent, this.lastIndex);
  356.                         this.timer = setTimeout(function(){
  357.                                 that.autoChange();
  358.                         }, this.speed);
  359.                 }
  360.                 else {
  361.                         this.timer = setTimeout(function(){
  362.                                 that.autoChange()
  363.                         }, this.speed);
  364.                         return false;
  365.                 }
  366.         },
  367.         /*
  368.          * 设置当前标签样式和当前显示内容
  369.          */
  370.         setCurrent: function(curTab, curCnt, index){
  371.                 var currentImage = null, itemHeight = 0, scrollHeight = 0;;
  372.                 YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
  373.                 if (curTab === this.tabs[this.defaultIndex]) {
  374.                         YAO.addClass(curTab, this.defaultClass);
  375.                 }
  376.                 else {
  377.                         YAO.addClass(curTab, 'current');
  378.                 }
  379.                 if (this.previousClass) {
  380.                         if (this.previousClassTab) {
  381.                                 YAO.removeClass(this.previousClassTab, this.previousClass);
  382.                         }
  383.                         if (index !== 0) {
  384.                                 YAO.addClass(this.tabs[index - 1], this.previousClass);
  385.                                 if ((index - 1) === this.defaultIndex) {
  386.                                         YAO.removeClass(this.tabs[index - 1], this.defaultClass);
  387.                                 }
  388.                                 this.previousClassTab = (this.tabs[index - 1]);
  389.                         }
  390.                 }
  391.                 if (!this.scroll) {
  392.                         this.lastContent.style.display = "none";
  393.                         curCnt.style.display = "block";
  394.                 }
  395.                 currentImage = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
  396.                 if (this.fadeUp) {
  397.                         if (this.lastContent !== curCnt) {
  398.                                 YAO.fadeUp(currentImage);
  399.                         }
  400.                 }
  401.                 else {
  402.                         if (this.scroll) {
  403.                                 itemHeight = currentImage.offsetHeight;
  404.                                 scrollHeight = -(index * itemHeight);
  405.                                 YAO.moveElement(this.scrollId, 0, scrollHeight, this.scrollSpeed);
  406.                         }
  407.                 }
  408.                 this.lastContent = curCnt;
  409.                 this.lastTab = curTab;
  410.         }
  411. };       
复制代码

[ 本帖最后由 yaohaixiao 于 2009-7-6 09:07 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

liuli80　
帖子
22
体力
222
威望
0
发表于 2009-7-6 11:56:59 |显示全部楼层
横向的 5张小图  大图上下翻的  那个效果 卡壳了。。。

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 12:00:03 |显示全部楼层

在Oprea下测试发现了一个Opera的BUG

在渐变切换显示的时候，会造成菜单的绝对定位层出现问题，absolute层好像显示为一般的块级元素，或者当作relative显示，会占布局空间的。
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 12:00:50 |显示全部楼层

回复 94# liuli80 的帖子

嗯，这个即时我说的那个BUG啊，呵呵，我会尽快处理的。
YAOHAIXAIO.COM

使用道具 举报

wdlili　
帖子
11
体力
34
威望
0
发表于 2009-7-6 13:10:22 |显示全部楼层

有一个问题请教


请问楼主，我想使用上面第一张图的这个效果，但是不知道怎么把它单独从您的演示页面抽出来（好像是js代码设置了全部联动的，剔除一点东西都不能正常显示），能否给一下指点，万分感谢，着急！
我是新手，呵呵！
另外您站点的AjaxTab导航这个无法下载，请检查一下！

[ 本帖最后由 wdlili 于 2009-7-6 13:21 编辑 ]

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 14:30:16 |显示全部楼层

回复 97# wdlili 的帖子

没有设置联动的，你只需要把多余的页面调用去掉就OK了

  1. YAO.YTabs({
  2.                 tabs: YAO.get('YSIndex').getElementsByTagName('a'),
  3.                 contents: YAO.getByClassName('YSample', 'p', 'YSlide'),
  4.                 defaultIndex: 1,
  5.                 fadeUp: true
  6.         });
复制代码
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 14:33:57 |显示全部楼层

回复 97# wdlili 的帖子

AJAX Tab的地址更正了，不过其实稍候我会把AJAX的导航也整合到这个simpleTab类里的，完成AJAX的整合后我就会整理一下简单的API说明文档的。

[ 本帖最后由 yaohaixiao 于 2009-7-6 14:35 编辑 ]
YAOHAIXAIO.COM

使用道具 举报

lilyswan　
帖子
2
体力
14
威望
0
发表于 2009-7-6 14:41:40 |显示全部楼层
原帖由 yaohaixiao 于 2009-6-24 09:11 发表
121130

如果有兴趣，大家也可去http://www.yaohaixiao.com/effects/index.html看看，这里放了些我整理的比较使用的一些代码。都提供下载的。


好厉害哟！真是一个活代码.........佩服！

使用道具 举报

cl2006　
帖子
85
体力
354
威望
0
居住地
浙江省 杭州市
发表于 2009-7-6 15:41:39 |显示全部楼层
效果不错 学习收藏~

使用道具 举报

njutliu　
帖子
308
体力
1206
威望
0
居住地
江苏省 南京市
发表于 2009-7-6 15:50:33 |显示全部楼层
不错，收藏了。就是把页面搞得好长。
爱生活，爱购物

使用道具 举报

vbyzc　
帖子
61
体力
185
威望
0
居住地
福建省 泉州市
发表于 2009-7-6 15:59:52 |显示全部楼层
谢谢，拿来用一用

使用道具 举报

wdlili　
帖子
11
体力
34
威望
0
发表于 2009-7-6 19:36:24 |显示全部楼层

还是不行啊！

我在页面里面这样添加的js函数，但还是不正常，特别奇怪，楼主帮我看看哪里有问题，多谢多谢，好人好人！！！！！
<script type="text/javascript" src="js/yao.js"></script>
<script type="text/javascript">
(function(){
YAO.YTabs({
                tabs: YAO.get('YNIndex').getElementsByTagName('a'),
                contents: YAO.get('YNews').getElementsByTagName('dl'),
                defaultIndex: 2,
                fadeUp: true
    });})
</script>

或者是
<script type="text/javascript">
YAO.YTabs({
                tabs: YAO.get('YNIndex').getElementsByTagName('a'),
                contents: YAO.get('YNews').getElementsByTagName('dl'),
                defaultIndex: 2,
                fadeUp: true
    });
</script>
两者都没有反应，不知道是哪里的问题！我是菜鸟，呵呵！
（以上这段代码直接抄自index.html里面js部分）

[ 本帖最后由 wdlili 于 2009-7-6 19:41 编辑 ]

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-6 21:31:02 |显示全部楼层

回复 104# wdlili 的帖子

给你个单独的打包程序，自己下载了看吧！！

程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-6 21:32 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

wdlili　
帖子
11
体力
34
威望
0
发表于 2009-7-6 22:08:23 |显示全部楼层

我晕啊！

经我反复研究多次，发现
<script language="javascript" type="text/javascript" src="js/yao.js"></script>
<script language="javascript" type="text/javascript">
<!--

        YAO.YTabs({
                tabs: YAO.get('YNIndex').getElementsByTagName('a'),
                contents: YAO.get('YNews').getElementsByTagName('dl'),
                defaultIndex: 2,
                fadeUp: true,
                auto: true
        });
//-->
</script>
上面这个代码一定要放到<div id="YNews">后面，效果才能正常显示！谢啦！！！！！！！

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 08:49:48 |显示全部楼层

回复 106# wdlili 的帖子

是的，我把JS完全分离出来了，如果你不放到后面YAO.get('YNIndex')这个节点是找不到的
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 09:09:08 |显示全部楼层

回复 94# liuli80 的帖子

这个问题已经修复了，而且把AJAX的导航也添加进去了



我对AJAX加载路径的处理

  1. <div id="YNormal-Tabs">
  2. <div id="YN-Tabs">
  3.      <ul>
  4.          <li class="current"><a href="js/dom" rel="dom"><span>DOM 编程艺术</span></a></li>
  5.          <li><a href="js/jsd" rel="jsd"><span>Javascript 设计模式</span></a></li>
  6.          <li><a href="js/jgp" rel="jgp"><span>Javascript 语言精粹</span></a></li>
  7.          <li><a href="css/cdg" rel="cdg"><span>CSS 权威指南</span></a></li>
  8.          <li><a href="css/cll" rel="cll"><span>CSS 布局实录</span></a></li>
  9.      </ul>
  10. </div>
  11. <div id="YN-Cnt">
  12.         <ul>
  13.                 <li><strong>1.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）</strong></li>
  14.                 <li>2.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。</li>
  15.                 <li>3.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]</li>
  16.                 <li>4.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]</li>
  17.                 <li>5.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；</li>
  18.                 <li>6.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；</li>
  19.                 <li>7.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）</li>
  20.                 <li>8.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。</li>
  21.                 <li>9.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]</li>
  22.                 <li>10.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]</li>
  23.         </ul>
  24. </div>       
  25. </div>
复制代码


这里的

  1. href="js/dom"
复制代码


是为了确保页面不支持JS，用户仍然可以访问的这个栏目的地址或者某个页面的地址

  1. rel="dom"
复制代码


这个则是你AJAX加载的文件的名字或则访问地址的参数，而完整的地址是这么获得的

  1. {
  2. aPath: 'samples/.htm/?id=' // 配置的一个属性
  3. }

  5. ajaxTab: function(curTab){
  6.                 var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
  7.                 ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
  8.                 url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
  9.                 YAO.ajaxRequest(url, cnt, cnt.innerHTML);
  10.         }
复制代码


通过uriData = this.aPath.split('/');，获得需要的参数uriData[0] = samples，实际的AJAX文件的目录路径，ajaxLink.rel  = dom文件名，uriData[1] = .htm 文件的扩展名 uriData[2]  = ?id= 参数名称，ajaxLink.rel同时又是参数参数

所以完整的路径url = 'samples/dom.htm?id=dom' 如果你的是php的，那么可能就是'samples/dom.php?id=dom'我想这样的文件路径形式，基本可以适应通常的开发了，如果你的文件路径确实很特殊，那我只好说，你需要发挥你的聪明才智，自己去组合了。

OK，到今天，我的YTabs的基本功能就全部定下来了

完整代码：
  1. var YAO = function(){
  2.         var A = '[object Array]', D = document, IE = navigator.userAgent.match(/MSIE\s([^;]*)/), nt = "nodeType", OP = Object.prototype;
  3.        
  4.         return {
  5.                 isArray: function(s){
  6.                         return OP.toString.apply(s) === A;
  7.                 },
  8.                 isString: function(s){
  9.                         return typeof s === 'string';
  10.                 },
  11.                 stopEvent: function(evt){
  12.                         this.stopPropagation(evt);
  13.                         this.preventDefault(evt);
  14.                 },
  15.                 stopPropagation: function(evt){
  16.                         if (evt.stopPropagation) {
  17.                                 evt.stopPropagation();
  18.                         }
  19.                         else {
  20.                                 evt.cancelBubble = true;
  21.                         }
  22.                 },
  23.                 preventDefault: function(evt){
  24.                         if (evt.preventDefault) {
  25.                                 evt.preventDefault();
  26.                         }
  27.                         else {
  28.                                 evt.returnValue = false;
  29.                         }
  30.                 },
  31.                 get: function(elem){
  32.                         var elemID, E, m, i, k, length, len;
  33.                         if (elem) {
  34.                                 if (elem[nt] || elem.item) {
  35.                                         return elem;
  36.                                 }
  37.                                 if (YAO.isString(elem)) {
  38.                                         elemID = elem;
  39.                                         elem = D.getElementById(elem);
  40.                                         if (elem && elem.id === elemID) {
  41.                                                 return elem;
  42.                                         }
  43.                                         else {
  44.                                                 if (elem && elem.all) {
  45.                                                         elem = null;
  46.                                                         E = D.all[elemID];
  47.                                                         for (i = 0, len = E.length; i < len; i += 1) {
  48.                                                                 if (E[i].id === elemID) {
  49.                                                                         return E[i];
  50.                                                                 }
  51.                                                         }
  52.                                                 }
  53.                                         }
  54.                                         return elem;
  55.                                 }
  56.                                 else {
  57.                                         if (elem.DOM_EVENTS) {
  58.                                                 elem = elem.get("element");
  59.                                         }
  60.                                         else {
  61.                                                 if (YAO.isArray(elem)) {
  62.                                                         m = [];
  63.                                                         for (k = 0, length = elem.length; k < length; k += 1) {
  64.                                                                 m[m.length] = YAO.get(elem[k]);
  65.                                                         }
  66.                                                         return m;
  67.                                                 }
  68.                                         }
  69.                                 }
  70.                         }
  71.                         return null;
  72.                 },
  73.                 hasClass: function(elem, className){
  74.                         var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
  75.                         return has.test(elem.className);
  76.                 },
  77.                 addClass: function(elem, className){
  78.                         if (this.hasClass(elem, className)) {
  79.                                 return;
  80.                         }
  81.                         elem.className = [elem.className, className].join(" ");
  82.                 },
  83.                 removeClass: function(elem, className){
  84.                         var replace = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)", "g");
  85.                         if (!this.hasClass(elem, className)) {
  86.                                 return;
  87.                         }
  88.                         var o = elem.className;
  89.                         elem.className = o.replace(replace, " ");
  90.                         if (this.hasClass(elem, className)) {
  91.                                 this.removeClass(elem, className);
  92.                         }
  93.                 },
  94.                 replaceClass: function(m, k, j){
  95.                         if (k === j) {
  96.                                 return false;
  97.                         }
  98.                         var l = new RegExp("(?:^|\\s+)" + k + "(?:\\s+|$)", "g");
  99.                         if (!this.hasClass(m, k)) {
  100.                                 this.addClass(m, j);
  101.                                 return;
  102.                         }
  103.                         m.className = m.className.replace(l, " " + j + " ");
  104.                         if (this.hasClass(m, k)) {
  105.                                 this.replaceClass(m, k, j);
  106.                         }
  107.                 },
  108.                 getByClassName: function(className, tag, rootTag){
  109.                         var elems = [], i, tempCnt = D.getElementById(rootTag).getElementsByTagName(tag), len = tempCnt.length;
  110.                         for (i = 0; i < len; i++) {
  111.                                 if (YAO.hasClass(tempCnt[i], className)) {
  112.                                         elems.push(tempCnt[i]);
  113.                                 }
  114.                         }
  115.                         if (elems.length < 1) {
  116.                                 return false;
  117.                         }
  118.                         else {
  119.                                 return elems;
  120.                         }
  121.                 },
  122.                 setOpacity: function(el, val){
  123.                         if (IE) {
  124.                                 if (YAO.isString(el.style.filter)) {
  125.                                         el.style.filter = 'alpha(opacity=' + val * 100 + ')';
  126.                                         if (!el.currentStyle || !el.currentStyle.hasLayout) {
  127.                                                 el.style.zoom = 1;
  128.                                         }
  129.                                 }
  130.                         }
  131.                         else {
  132.                                 el.style['opacity'] = val;
  133.                         }
  134.                 },
  135.                 YTabs: function(){
  136.                         var j, len = arguments.length, sigleTab = [];
  137.                         for (j = 0; j < len; ++j) {
  138.                                 sigleTab[j] = new YAO.simpleTab(arguments[j]);
  139.                         }
  140.                 },
  141.                 fadeUp: function(elem){
  142.                         if (elem) {
  143.                                 var level = 0, fade = function(){
  144.                                         var timer = null;
  145.                                         level += 0.05;
  146.                                         if (timer) {
  147.                                                 clearTimeout(timer);
  148.                                                 timer = null;
  149.                                         }
  150.                                         if (level > 1) {
  151.                                                 YAO.setOpacity(elem, 1);
  152.                                                 return false;
  153.                                         }
  154.                                         else {
  155.                                                 YAO.setOpacity(elem, level);
  156.                                         }
  157.                                         timer = setTimeout(fade, 50);
  158.                                 };
  159.                                 fade();
  160.                         }
  161.                 },
  162.                 zebra: function(){
  163.                         var j, length = arguments.length;
  164.                         for (j = 0; j < length; ++j) {
  165.                                 (function(config){
  166.                                         var root = YAO.get(config.rootTag) || (config.root || null), rows = root.getElementsByTagName(config.rowTag) || (config.rows || null), i, len = rows.length, lastClass = '';
  167.                                         if (root && rows && len > 1) {
  168.                                                 for (var i = 0; i < len; ++i) {
  169.                                                         rows[i].className = i % 2 == 0 ? 'even' : 'odd';
  170.                                                         rows[i].onmouseover = function(){
  171.                                                                 lastClass = this.className;
  172.                                                                 YAO.replaceClass(this, lastClass, 'hover');
  173.                                                         };
  174.                                                         rows[i].onmouseout = function(){
  175.                                                                 YAO.replaceClass(this, 'hover', lastClass);
  176.                                                         };
  177.                                                 }
  178.                                         }
  179.                                         else {
  180.                                                 return false;
  181.                                         }
  182.                                 })(arguments[j]);
  183.                         }
  184.                 },
  185.                 moveElement: function(element, finalX, finalY, speed){
  186.                         var elem = YAO.isString(element) ? YAO.get(element) : element, style = null;
  187.                         if (elem) {
  188.                                 if (elem.movement) {
  189.                                         clearTimeout(elem.movement);
  190.                                 }
  191.                                 if (!elem.style.left) {
  192.                                         elem.style.left = "0";
  193.                                 }
  194.                                 if (!elem.style.top) {
  195.                                         elem.style.top = "0";
  196.                                 }
  197.                                 var xpos = parseInt(elem.style.left);
  198.                                 var ypos = parseInt(elem.style.top);
  199.                                 if (xpos == finalX && ypos == finalY) {
  200.                                         return true;
  201.                                 }
  202.                                 if (xpos < finalX) {
  203.                                         var dist = Math.ceil((finalX - xpos) / 10);
  204.                                         xpos = xpos + dist;
  205.                                 }
  206.                                 if (xpos > finalX) {
  207.                                         var dist = Math.ceil((xpos - finalY) / 10);
  208.                                         xpos = xpos - dist;
  209.                                 }
  210.                                 if (ypos < finalY) {
  211.                                         var dist = Math.ceil((finalY - ypos) / 10);
  212.                                         ypos = ypos + dist;
  213.                                 }
  214.                                 if (ypos > finalY) {
  215.                                         var dist = Math.ceil((ypos - finalY) / 10);
  216.                                         ypos = ypos - dist;
  217.                                 }
  218.                                 elem.style.left = xpos + "px";
  219.                                 elem.style.top = ypos + "px";
  220.                                 elem.movement = setTimeout(function(){
  221.                                         YAO.moveElement(element, finalX, finalY, speed);
  222.                                 }, speed);
  223.                         }
  224.                 },
  225.                 ajaxRequest: function(url, id, sload){
  226.                         var oXhr, elem = YAO.isString(id) ? YAO.get(id) : id, sLoading = sload || '正在获取数据，请稍后...';
  227.                         if (!url || !id) {
  228.                                 return;
  229.                         }
  230.                         if (window.XMLHttpRequest) {
  231.                                 oXhr = new XMLHttpRequest();
  232.                         }
  233.                         else {
  234.                                 if (window.ActiveXObject) {
  235.                                         oXhr = new ActiveXObject("Microsoft.XMLHTTP");
  236.                                 }
  237.                         }
  238.                         if (oXhr !== null) {
  239.                                 try {
  240.                                         oXhr.open('GET', url, true);
  241.                                         oXhr.onreadystatechange = function(){
  242.                                                 if (oXhr.readyState == 4) {
  243.                                                         if (oXhr.status == 200 || location.href.indexOf('http')===-1) {
  244.                                                                 elem.innerHTML = oXhr.responseText;
  245.                                                         }
  246.                                                         else {
  247.                                                                 elem.innerHTML = sLoading;
  248.                                                         }
  249.                                                 }
  250.                                         };
  251.                                         oXhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
  252.                                         oXhr.send(null);
  253.                                 }
  254.                                 catch (e) {
  255.                                         throw new Error(e);
  256.                                         return false;
  257.                                 }
  258.                         }
  259.                         else {
  260.                                 throw new Error("Your browser does not support XMLHTTP.");
  261.                                 return false;
  262.                         }
  263.                 }
  264.         };
  265. }();
  266. YAO.simpleTab = function(oConfigs){
  267.         this.tabCnt = (oConfigs.tabId) ? YAO.get(oConfigs.tabId) : (oConfigs.tabRoot || null);
  268.         this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null);
  269.         this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null);
  270.         this.length = this.tabs.length || 0;
  271.         this.defaultIndex = oConfigs.defaultIndex || 0;
  272.         this.lastIndex = this.defaultIndex;
  273.         this.lastTab = this.tabs[this.lastIndex] || null;
  274.         this.lastContent = this.contents[this.lastIndex] || null;
  275.         this.evtName = oConfigs.evt || 'mouseover';
  276.         this.defaultClass = oConfigs.defaultClass || 'current';
  277.         this.previousClass = oConfigs.previousClass || '';
  278.         this.hideAll = oConfigs.hideAll || false;
  279.         this.auto = oConfigs.auto || false;
  280.         this.isPause = false;
  281.         this.speed = oConfigs.speed || 6000;
  282.         this.fadeUp = oConfigs.fadeUp || false;
  283.         this.scroll = oConfigs.scroll || false;
  284.         this.scrollId = oConfigs.scrollId || null;
  285.         this.scrollSpeed = oConfigs.scrollSpeed || 5;
  286.         this.ajax = oConfigs.ajax || false;
  287.         this.aPath = oConfigs.aPath || '';
  288.        
  289.         var i, that = this;
  290.         if (this.auto) {
  291.                 this.timer = setTimeout(function(){
  292.                         that.autoChange();
  293.                 }, that.speed);
  294.         }
  295.         if (this.tabs && this.contents) {
  296.                 if (!this.hideAll) {
  297.                         YAO.addClass(this.lastTab, this.defaultClass);
  298.                         if (!this.ajax) {
  299.                                 this.lastContent.style.display = 'block';
  300.                         }
  301.                         else{
  302.                                 this.ajaxTab(this.lastTab);
  303.                         }
  304.                 }
  305.                 else {
  306.                         YAO.removeClass(this.lastTab, this.defaultClass);
  307.                         if (!this.scroll) {
  308.                                 this.lastContent.style.display = 'none';
  309.                         }
  310.                 }
  311.                 for (i = 0; i < this.length; ++i) {
  312.                         if (i !== this.defaultIndex && !this.scroll) {
  313.                                 YAO.removeClass(this.tabs[i], 'current');
  314.                                 if (!this.ajax) {
  315.                                         this.contents[i].style.display = 'none';
  316.                                 }
  317.                         }
  318.                         this.tabs[i]['on' + this.evtName] = function(index){
  319.                                 return function(event){
  320.                                         var evt = null, currentContent = that.ajax ? that.contents : that.contents[index], currentTab = this;
  321.                                         that.setCurrent.call(that, this, currentContent, index);
  322.                                         that.lastIndex = index;
  323.                                         if (that.auto) {
  324.                                                 that.isPause = true;
  325.                                         }
  326.                                         evt = event || window.event;
  327.                                         YAO.stopEvent(evt);
  328.                                 }
  329.                         }(i);
  330.                         this.tabs[i]['onmouseout'] = function(index){
  331.                                 return function(){
  332.                                         if (that.hideAll && that.evtName === 'mouseover') {
  333.                                                 if (that.lastTab === this) {
  334.                                                         YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current'));
  335.                                                 }
  336.                                                 if (that.previousClassTab) {
  337.                                                         YAO.removeClass(that.previousClassTab, that.previousClass);
  338.                                                 }
  339.                                                 if (!that.scroll && !that.ajax) {
  340.                                                         that.contents[index].style.display = 'none';
  341.                                                 }
  342.                                         }
  343.                                         else {
  344.                                                 if (that.auto) {
  345.                                                         that.isPause = false;
  346.                                                 }
  347.                                         }
  348.                                 }
  349.                         }(i);
  350.                 }
  351.         }
  352. };

  354. YAO.simpleTab.prototype.timer = null;
  355. YAO.simpleTab.prototype.isPause = false;
  356. YAO.simpleTab.prototype = {
  357.         autoChange: function(){
  358.                 var that = this;
  359.                 if (!this.isPause) {
  360.                         var currentContent = null, currentTab = null;
  361.                         if (this.timer) {
  362.                                 clearTimeout(this.timer);
  363.                                 this.timer = null;
  364.                         }
  365.                         this.lastIndex = this.lastIndex + 1;
  366.                         if (this.lastIndex === this.length) {
  367.                                 this.lastIndex = 0;
  368.                         }
  369.                         currentContent = this.ajax ? this.contents : this.contents[this.lastIndex];
  370.                         currentTab = this.tabs[this.lastIndex];
  371.                         this.setCurrent(currentTab, currentContent, this.lastIndex);
  372.                         this.timer = setTimeout(function(){
  373.                                 that.autoChange();
  374.                         }, this.speed);
  375.                 }
  376.                 else {
  377.                         this.timer = setTimeout(function(){
  378.                                 that.autoChange()
  379.                         }, this.speed);
  380.                         return false;
  381.                 }
  382.         },
  383.         setCurrent: function(curTab, curCnt, index){
  384.                 var currentImage = null, itemHeight = 0, scrollHeight = 0;;
  385.                 YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current'));
  386.                 if (curTab === this.tabs[this.defaultIndex]) {
  387.                         YAO.addClass(curTab, this.defaultClass);
  388.                 }
  389.                 else {
  390.                         YAO.addClass(curTab, 'current');
  391.                 }
  392.                 if (this.previousClass) {
  393.                         if (this.previousClassTab) {
  394.                                 YAO.removeClass(this.previousClassTab, this.previousClass);
  395.                         }
  396.                         if (index !== 0) {
  397.                                 YAO.addClass(this.tabs[index - 1], this.previousClass);
  398.                                 if ((index - 1) === this.defaultIndex) {
  399.                                         YAO.removeClass(this.tabs[index - 1], this.defaultClass);
  400.                                 }
  401.                                 this.previousClassTab = (this.tabs[index - 1]);
  402.                         }
  403.                 }
  404.                 if (!this.scroll && !this.ajax) {
  405.                         this.lastContent.style.display = "none";
  406.                         curCnt.style.display = "block";
  407.                 }
  408.                 currentImage = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
  409.                 if (this.fadeUp) {
  410.                         if (this.lastContent !== curCnt) {
  411.                                 YAO.fadeUp(currentImage);
  412.                         }
  413.                 }
  414.                 else {
  415.                         if (this.scroll) {
  416.                                 itemHeight = currentImage.offsetHeight;
  417.                                 scrollHeight = -(index * itemHeight);
  418.                                 YAO.moveElement(this.scrollId, 0, scrollHeight, this.scrollSpeed);
  419.                         }
  420.                 }
  421.                 if (!this.ajax) {
  422.                         this.lastContent = curCnt;
  423.                 }
  424.                 else{
  425.                         this.ajaxTab(curTab);
  426.                 }
  427.                 this.lastTab = curTab;
  428.         },
  429.         ajaxTab: function(curTab){
  430.                 var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
  431.                 ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
  432.                 url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
  433.                 YAO.ajaxRequest(url, cnt, cnt.innerHTML);
  434.         }
  435. };       
复制代码

[ 本帖最后由 yaohaixiao 于 2009-7-7 09:22 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:26:11 |显示全部楼层

YTab Menu 单个个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:27:29 |显示全部楼层

YTab TBMenu 单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 15:33 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:39:34 |显示全部楼层

YTabs 图片切换特效单个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:45:40 |显示全部楼层

YTabs 字符标签导航单个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:52:32 |显示全部楼层

YTabs 侧边标签导航单个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 15:54:58 |显示全部楼层

YTabs YAHOO皮肤多嵌套标签导航单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 16:00 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:02:39 |显示全部楼层

YTabs 标签导航+隔行、划过换色单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 16:11 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:17:51 |显示全部楼层

YTabs Ajax标签导航单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 16:18 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:25:02 |显示全部楼层

YTabs 缩略图自动滚动切换图片新闻单个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:34:35 |显示全部楼层

YTabs 数字索引自动渐变切换图片新闻单个程序打包



程序打包：
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:36:13 |显示全部楼层

YTabs 数字索引自动渐变切换，带新闻简介图片新闻单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 16:40 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

yaohaixiao　楼主

会武术的科学家

实习版主

帖子
2057
体力
5637
威望
45
居住地
浙江省 杭州市
发表于 2009-7-7 16:41:40 |显示全部楼层

YTabs MSN缩略图自动渐变切换图片新闻单个程序打包



程序打包：

[ 本帖最后由 yaohaixiao 于 2009-7-7 16:46 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号？注册
YAOHAIXAIO.COM

使用道具 举报

12345678910... 13下一页
返回列表
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册


Archiver|手机版|blueidea.com ( 京ICP备05002321号 )    

GMT+8, 2012-5-22 17:14 , Processed in 0.199315 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部