博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

右下角弹出窗口兼容ie5.5到ie8,火狐，…

Posted on 2009-09-13 23:23  一刻  阅读(1338)  评论(3)    收藏  举报
跑别人网站看到右下角弹出留言本，随滚动条滚动，感觉还不错，自己也写一个，认真分析了一下，写了个出来，但是这里还是有可以改进的地方，时间关系，以后再改，先贴出来。。。。。
<html>
  <head><title></title>
    
    <style type="text/css">
    <!--
       *{margin:0;padding:0;}
       body{text-align:center;}
       #main{border:red 1px solid;width:1000px;height:1600px;margin:0 auto;}
       #main #scroll{width:400px;height:150px;border:green 1px solid;text-align:left;position:absolute;visibility:hidden;}
       #main #scroll #open{float:left;text-align:center;width:360px}
       #main #scroll #close{float:right;}
     // -->
    </style>
   
  </head>
    <body ><div id="main">
           <div id="scroll"><div id="open" onmouseover="openbox();"> <a href="#" onclick="openbox()">请给我们留言</a> </div>
                            <div id="close"><a href="#" onclick="closebox()" >关闭</a><script type="text/javascript">
     <!--
       var scroll=document.getElementById("scroll")
       var main=document.getElementById("main")
       var open=document.getElementById("open")
       var close=document.getElementById("close")
       /*scroll层开始设为隐藏，不然开始的时候会不出现在底部，这里通过跟js代码同步条镇，使scroll层开始就出现在右底*/
       scroll.style.visibility="visible"
      function runright()
       {
         
         /*这里-4主要是为了显示的比较好,因为我设置了边框*/
         scroll.style.top=document.body.scrollTop+document.body.clientHeight-scroll.clientHeight-4+"px"
         scroll.style.left=document.body.scrollLeft+document.body.clientWidth-scroll.clientWidth-4+"px"
         /*隔一段时间执行这个函数*/
         setTimeout("runright()",30)
         }
         
   
  /*关闭:设置高度一直减*/
      function closebox()
      {
        
        scroll.style.height=scroll.offsetHeight-4+"px"
       
        if (scroll.offsetHeight>20)
         {
        setTimeout("closebox()",5)
         }
        else
         {
            close.style.visibility="hidden"
         }
       
      }
      function openbox()
      {
         
        
        if (scroll.offsetHeight<148)
         {
            close.style.visibility="visible"
        scroll.style.height=scroll.offsetHeight+2+"px"
        setTimeout("openbox()",5)
         }
       
      }
     
      runright();
     // -->
 
    </script>
              </div>
            </div>
          </div>
   </body>
</html>