开发学院网页设计JavaScript 【JavaScript】悬浮窗口 阅读

【JavaScript】悬浮窗口

 2010-09-14 13:37:06 来源:WEB开发网   
核心提示:主要是window.onscroll的运用效果如图: 代码如下:<html><head><title>悬浮窗口示例</title><scripttype="text/javascript">window.onscroll=function(

主要是window.onscroll的运用

效果如图:

【JavaScript】悬浮窗口

代码如下:

<html>
  <head>
    <title>悬浮窗口示例</title>
    <scripttype="text/javascript">
      window.onscroll=function(){
        vardiv=document.getElementById("divSuspended");
        div.style.top=document.body.scrollTop;
      }
      window.onresize=window.onscroll;
      functioninit(){
        vardf=document.createDocumentFragment();
        for(vari=0;i<20;i++){
          varp=document.createElement("p");
          p.appendChild(document.createTextNode("Line"+i));
          df.appendChild(p);
        }
        document.body.appendChild(df);
        window.onscroll();
      }
    </script>
  </head>
  <bodyonload="init()">
    <p>Tryscrollingthiswindow.</p>
    <divid="divSuspended"style="position:absolute;buttom:0px;right:0px;color:#cccccc;width:150px;height:30px;background-color:navy">这是悬浮窗口</div>
  </body>
</html>

Tags:JavaScript 悬浮 窗口

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接