左侧弹出导航菜单图层特效代码-JS特效-爱易网页

左侧弹出导航菜单图层特效代码

日期：2014-05-18　浏览次数：20280 次

以下是程序代码

<html>
<head>
<title>test</title>
<style type="text/css">
   #main{
         width:370px;
         height:50px;
         background:url('1.bmp') right top no-repeat;
         position:absolute;
         top:150px;
         border-top:2px solid gray;
         border-bottom:2px solid gray; 
         border-right:2px solid red;
        }
   #main a {
        border:1px solid green;
       }
</style>
<script type="text/javascript">
var frag1=null;
var frag2=null;
function baropen()
              {
              var barobj=document.getElementById("main");
              var curleft=barobj.style.left;
              curw=parseInt(curleft);
              var test=1;
              test*=5;
              if(curw<0)
               {
                 barobj.style.left=(curw+test)+"px";
               }
              else
               {
                 clearInterval(frag1);
                 frag1=null;
               }     
              }
function barclose(barobj)
              {
              var barobj=document.getElementById("main");
              var curleft=barobj.style.left;
              curw=parseInt(curleft,10);
              var test=1;
              test*=5;
              if(curw>-350)
               {
                 barobj.style.left=(curw-test)+"px";
               }
              else
               {
                 clearInterval(frag2);
                 frag2=null;
               }     
              }
function loopopen()
  {
   if(frag2!==null)
    {
     clearInterval(frag2);
    }
    frag1=setInterval('baropen()',1);
  }
function loopclose()
   {
    clearInterval(frag1);
    frag2=setInterval('barclose()',1);
   }
function test() 
   {
    alert(document.getElementById("main").style.left);            
   }
</script>
</head>
<body>
  <div id="main" style="left:-350px;" onmouseover="loopopen();" onmouseout="loopclose();">
    <a href="http://js.aiyiweb.com">网页特效</a>
    <a href="#">test1</a>
    <a href="http://www.aiyiweb.com" onclick="test();">网页制作教程</a>
  </div>
      <a href="http://www.aiyiweb.cn" onclick="test();">网页模板</a>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

左侧弹出导航菜单图层特效代码

相关资料更多>

推荐阅读更多>