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

稿源：互联网 2022-04-02 21:40:06 点击： 6467 撤稿纠错

这是一侧简单特效代码：左侧菜单弹出效果，希望能对一些新手起到启发作用...

以下讨论的是和弹出相关的左侧弹出导航菜单图层特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<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.alixixi.com">网页特效</a>
    <a href="#">test1</a>
    <a href="http://www.alixixi.com" onclick="test();">网页制作教程</a>
  </div>
      <a href="http://www.alixixi.cn" onclick="test();">网页模板</a>
</body>
</html>

关于左侧弹出导航菜单图层特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011060271023.shtml方便下次再访问哦。

·上一篇： 如何获取某个元素定义的全部样式
·下一篇： 一款JS求解小游戏通过鼠标点击破解游戏

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

文章分类LIST >>返回首页

最新游戏

最新新闻