js 滑动层特效,让内容慢慢的显示出来

发布时间:2008年12月31日      浏览次数:1636 次
<body>
<style>
body{text-align:center;}
.main_item{ width:670px; height:auto; margin:0 auto; overflow:hidden; border:1px solid #cccccc;}
.main_title{      margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center; cursor:pointer;border-bottom:1px solid #cccccc;}
.main_content{ width:100%; height:0px; margin:0 auto;}
</style>
<script>
var show_n;
var H=200; //设定层内容的高度
var h_m=24; //设定层标题的高度
var n=10; //设定显示的秒数
var t=50;
function init(main_title,main_content,content,main_item,show_me){
      document.getElementById(main_title).onmouseover=function(v){show_con(v,main_title,main_content,content,main_item);}
      if (show_me!=0){
            show_n=main_item; //设置当前所显示的层ID
            document.getElementById(main_content).innerHTML=document.getElementById(content).innerHTML;
            document.getElementById(main_item).style.height=H+"px";
      }
      else{
            document.getElementById(main_content).innerHTML=document.getElementById(content).innerHTML;
            document.getElementById(main_item).style.height=h_m+"px";
      }
}
function show_con(v,main_title,main_content,content,main_item){
      var v = v || window.event;
      var obj_show_main_item=document.getElementById(main_item); //显示当前激活的层
      var obj_hid_main_item=document.getElementById(show_n); //隐藏当前已显示的层
      if (show_n!=main_item){ //如果层的ID不是当前所显示的层,则
            show_n=main_item; //设置当前激活层的ID为所显示的层ID
            var obj = v.target || v.srcElement;
            document.getElementById(main_content).innerHTML=document.getElementById(content).innerHTML; //将隐藏的内容显示出来
            var timers= new Array(n);
            for(var i=0;i<n;i++){(
                  function(){
                        if(timers[i]) clearTimeout(timers[i]);
                        var j=i;
                        timers[i]=setTimeout(
                              function(){
                                    obj_hid_main_item.style.height=H-Math.round((H-h_m)*(j+1)/n)+"px";
                                    obj_show_main_item.style.height=h_m+Math.round((H-h_m)*(j+1)/n)+"px";
                              }
                              ,(i+1)*t);
                        }
                  )()};
      }
}
</script>
<div>
      <!--#1-->
      <div id='main_item_1' class='main_item'>
            <div id='main_title_1' class='main_title'>标题一</div>
            <div class='main_content' id='main_content_1'></div>
      </div>
      <div style="display:none">
            <div id="content_1"><span>内容一</span></div>
      </div>
      <script>init('main_title_1','main_content_1',"content_1",'main_item_1',1);      </script>
      
      <!--#2-->
      <div id='main_item_2' class='main_item'>
            <div id='main_title_2' class='main_title'>标题二</div>
            <div class='main_content' id='main_content_2'> </div>
      </div>
      <div style="display:none">
            <div id="content_2"> <span><span>内容二</span></span> </div>
      </div>
      <script>init('main_title_2','main_content_2',"content_2",'main_item_2',0);      </script>
      
      <!--#3-->
      <div id='main_item_3' class='main_item'>
            <div id='main_title_3' class='main_title'>标题三</div>
            <div class='main_content' id='main_content_3'></div>
      </div>
      <div style="display:none">
            <div id="content_3"> <span><span>内容三</span></span> </div>
      </div>
      <script>init('main_title_3','main_content_3',"content_3",'main_item_3',0);</script>
</div>
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!