Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-22 21:42:15

网页左侧悬浮代码网页左侧菜单网页左侧弹出

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <html>
<head>
<title>test</title>
<style type="text/css">
   #main{
         width:400px;
         height:300px;
         position:absolute;
         top:150px;
         border-top:2px solid #f90;
         border-bottom:2px solid #f90; 
         border-right:2px solid #f90;
		 background:#FF0000;
        }
   #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();">
  </div>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： css展开收缩特效代码

下一篇文章：固定在网页底部兼容IE6 火狐的css浮动层特网页效代码

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

鼠标hover左侧滑动弹出网页客服图层特效代码

推荐阅读：

相关代码：

标签分类