【JavaScript】悬浮窗口


主要是window.onscroll的运用

  效果如图:

  

  代码如下:

<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>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3