首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

制造简单的悬浮效果

2012-12-21 
制作简单的悬浮效果htmlheadtitle悬浮窗口示例/titlescript typetext/javascriptwindow.onsc

制作简单的悬浮效果

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

热点排行