javascript实现的固定位置悬浮窗口实例
本文实例讲述了javascript实现的固定位置悬浮窗口。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Fixed固定位置的悬浮</title>
<style>
*{font-size:12px;font-family:Verdana,宋体;}
html,body{margin:0px;padding:0px;overflow:hidden;}
.b{margin:0px;padding:0px;overflow:auto;}
.line0{line-height:20px;background-color:lightyellow;
padding:0px15px;}
.line1{line-height:18px;background-color:lightblue;
padding:0px10px;}
.w{position:absolute;right:10px;bottom:10px;width:160px;
height:240px;overflow:hidden;border:2pxgroove#281;
cursor:default;-moz-user-select:none;}
.t{line-height:20px;height:20px;width:160px;
overflow:hidden;background-color:#27C;color:white;
font-weight:bold;border-bottom:1pxoutsetblue;
text-align:center;}
.winBody{height:218px;width:160px;overflow-x:hidden;
overflow-y:auto;border-top:1pxinsetblue;
padding:10px;text-indent:10px;background-color:white;
}
</style>
</head>
<body>
<divclass="w">
<divclass="t">DemoWin-Fixed</div>
<divclass="winBody">Helloworld</div>
<div>https://www.nhooo.com/</div>
</div>
</body>
<script>
//测试用，随机产生一定的内容
for(vari=0;i<400;i++)document.write("<divclass=\"line"+(i%2)+"\">"+(newArray(20)).join((Math.random()*1000000).toString(36)+"")+"<\/div>");
//代码如下：
newfunction(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]="b";
for(vari=0;i<o.length-1;i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize=function(){
w.style.width=d.documentElement.clientWidth+"px";
w.style.height=d.documentElement.clientHeight+"px";
})();
}
</script>
</html>
希望本文所述对大家的javascript程序设计有所帮助。