搜索
 找回密码
 加入

雅虎、网易ajax标签导航效果的实现

miaochi 2007-3-25 15:24:10 1674
返回列表 发新帖
miaochi

DMM DUGA XCREAM SOKMIL等日本PPV站视频代购

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>隐藏/显示层</title>
  6. <style type="text/css">
  7. <!--
  8. body{
  9.         background: #FFF;
  10.         color: #000;
  11.         font: normal 12px 宋体,arial,sans-serif;
  12.         margin: 0;
  13.         padding: 0;
  14.         text-align: left;
  15. }

  17. div,form,ul,ol,li,span,p {
  18.         border: 0;
  19.         margin: 0;
  20.         padding: 0;
  21. }

  23. /*清除float*/
  24. .clear{
  25.         clear: both;
  26.         font-size: 1px;
  27.         visibility: hidden;
  28. }

  30. /*分类标题*/
  31. .class_title{
  32.         margin: 0 auto;
  33.         width: 504px;
  34.         height: 17px;
  35.         border: 1px solid #9EB1C0;
  36.         padding: 1px;
  37.         background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
  38. }

  40. .class_title h2{
  41.         margin: 0;
  42.         padding: 2px 0 2px 18px;
  43.         height: 12px;
  44.         color: #16387C;
  45.         font: bold 13px 宋体,arial,sans-serif;
  46.         cursor:pointer;
  47.         letter-spacing: 2px;
  48.         text-align: left;
  49. }

  51. #tabclass1{
  52. background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
  53. }

  55. /*分类列表（模块一）*/
  56. #class_cnt1{
  57.         background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
  58.         border: solid #9EB1C0;
  59.         border-width: 0 1px 1px 1px;
  60.         height: 287px;
  61.         margin: 0 auto;
  62.         text-align: left;
  63.         width: 506px;
  64.         display: block;
  65.   overflow:hidden;
  66. }

  68. #class_cnt1 p{
  69.    margin:0;
  70.    padding:3px;
  71.    line-height:150%;
  72. }
  73. -->
  74. </style>

  76. <script language="javascript" type="text/javascript">
  77. <!--
  78. //=======================================================
  79. //函数名称：getObject(objectId)
  80. //          参数objectId:控件的ID值
  81. //函数功能：获得控件的ID值
  82. //返 回 值：ture(获得ID值) false(获取ID失败)
  83. //=======================================================
  84. function getObject(objectId) {
  85.     if(document.getElementById && document.getElementById(objectId)) {
  86.         // W3C DOM
  87.         return document.getElementById(objectId);
  88.     } else if (document.all && document.all(objectId)) {
  89.         // MSIE 4 DOM
  90.         return document.all(objectId);
  91.     } else if (document.layers && document.layers[objectId]) {
  92.         // NN 4 DOM.. note: this won't find nested layers
  93.         return document.layers[objectId];
  94.     } else {
  95.         return false;
  96.     }
  97. }

  99. // 显示列表框
  100. function displayList(){   
  101.               var h = getObject('class_cnt1').offsetHeight;  // 内容容器class_cnt1的初始高度（这时高度为：0）
  102.               var max_h = 287; // 容器的最大高度
  103.              
  104.               var anim = function(){                       
  105.                                     h += 50; // 每次递增50像素
  106.                                     //如果增加的高度开始超过容的最大高度
  107.                                     if(h >= max_h){
  108.                             getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)
  109.                             getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景               
  110.                             if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
  111.                                     }
  112.                                     else{ // 如果增加中的容器高度没有超过287px
  113.                 getObject('class_cnt1').style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
  114.                 getObject('class_cnt1').style.height = h + "px"; // 容器高度不断的以50px递增
  115.                                     }
  116.                     }
  117.                           
  118.                           var tt = window.setInterval(anim,2);  // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）       
  119. }

  121. // 隐藏列表框
  122. function hiddenList(){
  123.        var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
  124.                    var anim = function(){
  125.                              h -= 50; // 每次递减50像素
  126.                              
  127.                              if(h <= 5){
  128.                      getObject('class_cnt1').style.display="none"; // 内容容器不可见（当容器高度小于5px）
  129.                            getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)";
  130.                            if(tt){window.clearInterval(tt);}
  131.                        }
  132.                        else{
  133.                            getObject('class_cnt1').style.height = h + "px"; // // 容器高度不断的以50px递减
  134.                        }
  135.                    }
  136.                      
  137.                    var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
  138. }

  140. //=======================================================
  141. //函数名称：showClassList()
  142. //函数功能：隐藏-显示级分类列表框（class_cnt1）
  143. //返 回 值：无
  144. //=======================================================
  145. function showClassList(){
  146.    // 如果内容容器为不可见的display:none
  147.    if(getObject('class_cnt1').style.display == "none"){
  148.        displayList(); // 显示内容框
  149.    }
  150.    else{ // 如果内容容器为可见的display:block
  151.              hiddenList(); // 隐藏内容框
  152.          }
  153. }
  154. -->
  155. </script>
  156. </head>
  157. <body>
  158.         <div class="class_title">
  159.                  <h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>                 
  160.         </div>                 
  161.         <div id="class_cnt1">
  162.         <p>
  163.         1111111<br />
  164.         111111111<br />
  165.         1111111<br />
  166.         111111111<br />
  167.         1111111<br />
  168.         111111111<br />
  169.         1111111<br />
  170.         111111111<br />
  171.         1111111<br />
  172.         111111111<br />
  173.         1111111<br />
  174.         111111111<br />
  175.         111111111<br />
  176.         </p>
  177.         </div>
  178. </body>
  179. </html>
复制代码
Ajax，导航，网易，效果，雅虎

评分

1

查看全部评分

举报

相关推荐
 求个补丁. 法师新技能效果补丁。
 魔法技能效果补丁！
 CHAR技能加速辅助文件（加速3倍效果）
 怀念测试新端效果
 关于法师70大群效果补丁
 两种战士的平民武器，哪种效果更好点呢？？？
 怎么去掉手上发光的效果，？
 2.0的怎样能消除JS加血效果？
 盛大游戏被网易反超 失老二地位
 跪求单独改群血和法师群效果方法...

1 回复

yellky
2007-3-25 15:24:10

举报

点击查看详情
:victory: 效果的确很不错

赞一下

不过我没有看到与ajax相关的代码??
B Color Image Link Quote Code Smilies
高级模式
游客
返回
发布新主题
miaochi
积分
 		主题
 		精华
作者最近主题
    内容均来自互联网如侵犯您的权利请邮件:[email protected] 鄂ICP备07001904号