zoukankan      html  css  js  c++  java
  • 鼠标滑动带动画下拉展开的滑动门代码

    代码简介:这个滑动门真的太好了,在雅虎网站扒下来的,会动画展开的滑动门,你见过没?过一段时间会自动合上,在yahoo首页的邮箱登录处有这种效果,有兴趣可以比较一下。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>鼠标滑动带动画下拉展开的滑动门代码_网页代码站(www.webdm.cn)</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    body{ margin:0px; padding:0px; font-size:14px; line-height:18px; color:#111111;}
    a:link,a:visited{ display:block; 90px; height:25px; margin:0px; padding:0px; text-align:center; line-
    
    height:25px; font-size:14px; font-weight:bold; text-decoration:none; color:#111111;}
    a:hover{ font-size:14px; font-weight:bold; text-decoration:underline; color:#111111;}
    #b{ display:block; 500px; height:500px; margin:0px auto; padding:0px; padding-top:50px;}
    #container{ display:block; 300px; height:117px; margin:0px; padding:0px; background-color:#E8F3FF; 
    
    border:1px solid #95CAFF; text-align:center; overflow:hidden;}
    #nav{ display:block; 300px; height:30px; margin:0px; margin-top:85px; padding:0px;}
    .navB{ display:block; float:left; 90px; height:25px; background-color:#FFFFFF; border:1px solid #95CAFF; 
    
    margin:0px; margin-left:6px; padding:0px; text-align:center; line-height:25px;}
    .navB_Cur{display:block; float:left; 90px; height:30px; background-color:#FFFFFF; border:1px solid 
    
    #95CAFF; border-bottom:none; margin:0px; margin-left:6px; padding:0px; text-align:center; line-height:25px; 
    
    position:relative; z-index:1000;}
    .content{ display:none;}
    .content_Cur{ display:block; 266px; height:70px; margin:0px; margin-top:0px; margin-left:6px; *margin-
    
    left:0px; padding:10px; background-color:#FFFFFF; border:1px solid #95CAFF;}
    </style>
    </head>
    <body>
    <div id="b">
      <div id="container">
        <div id="nav">
          <span id="newsBtn" class="navB" onmouseover="changeTab
    
    ('newsBtn','homeBtn','circleBtn','news','home','circle');" onmouseout="delay();"><a href="#" target="_self">网
    
    页代码站</a></span>
    	  <span id="homeBtn" class="navB" onmouseover="changeTab
    
    ('homeBtn','newsBtn','circleBtn','home','news','circle');" onmouseout="delay();"><a href="#" target="_self">最
    
    新更新</a></span>
    	  <span id="circleBtn" class="navB" onmouseover="changeTab
    
    ('circleBtn','homeBtn','newsBtn','circle','home','news');" onmouseout="delay();"><a href="#" target="_self">下
    
    载排行</a></span>
        </div>
        <div id="news" class="content" onmouseout="delay();" onmouseover="removeDelay();">网页代码站提供高质量的代
    
    码下载供学习,希望记住我们的域名:WebDn.CN</div>
        <div id="home" class="content" onmouseout="delay();" onmouseover="removeDelay();">网页代码站最新更新的代码
    
    </div>
        <div id="circle" class="content" onmouseout="delay();" onmouseover="removeDelay();">下载排行,睢一瞧……
    
    </div>
      </div>
      <div id="tt"></div>
    </div>
    <script language="javascript">
    function $(id)
    {
      return document.getElementById(id);
    }
    var state="closed";
    var time=3000;
    var openH=222;
    var closeH=108;
    var activeH=116;
    var myMar;
    var myDelay;
    function openIng(){
      if(activeH!=openH-9){
    	activeH+=parseInt((openH-activeH)*0.1);
    	$("container").style.height=activeH+"px";
    	$("tt").innerHTML=activeH+" | "+closeH;
      }
      else{
        clearInterval(myMar);
    	state="opened";
    	$("tt").innerHTML=state;
      } 
    }
    function startOpen(){
        myMar=setInterval(openIng,5);
    	state="opening";
    }
    function closeTab(){
      $("newsBtn").className="navB";
      $("homeBtn").className="navB";
      $("circleBtn").className="navB";
      $("news").className="content";
      $("home").className="content";
      $("circle").className="content";
    }
    function closeIng(){
      if(activeH!=closeH+9){
    	activeH+=parseInt((closeH-activeH)*0.1);
    	$("container").style.height=activeH+"px";
    	$("tt").innerHTML=activeH+" | "+closeH;
      }
      else{
        clearInterval(myMar);
    	closeTab();
    	state="closed";
    	$("tt").innerHTML=state;
      }
    }
    function startClose(){
        myMar=setInterval(closeIng,5);
    	state="closing";
    }
    function delay(){
      if(state=="opened"){
        myDelay=setTimeout(startClose,time);
      }
    }
    function removeDelay(){
      clearTimeout(myDelay);
    }
    function changeTab(actBtn,sndBtn,thdBtn,actlay,sndlay,thdlay){
      $(actBtn).className="navB_Cur";
      $(sndBtn).className="navB";
      $(thdBtn).className="navB";
      $(actlay).className="content_Cur";
      $(sndlay).className="content";
      $(thdlay).className="content";
      removeDelay();
      if(state=="closed"){
        startOpen();
      }
    }
    </script>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/f256cdfc-d818-4d48-ad46-f791ffe8b71e.html

  • 相关阅读:
    JS各种各样的拖动效果
    GridView实现自动编号
    通用海量数据库翻页
    设置首页和添加到收藏夹的JavaScript代码
    JavaScript弹出窗口总结
    JavaScript获取窗口的高度和宽度
    精妙SQL语句
    Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
    GridView数据导入Excel
    网站采集
  • 原文地址:https://www.cnblogs.com/webdm/p/2007595.html
Copyright © 2011-2022 走看看