0顶

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

稿源：互联网 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 >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻