javascript實(shí)現(xiàn)的固定位置懸浮窗口實(shí)例
更新時(shí)間：2015年04月30日 09:15:43 作者：休閑生活文化
這篇文章主要介紹了javascript實(shí)現(xiàn)的固定位置懸浮窗口,以一個(gè)完整實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript實(shí)現(xiàn)的固定位置懸浮窗口。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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:0px 15px; }
.line1 { line-height:18px; background-color:lightblue;
padding:0px 10px; }
.w { position:absolute; right:10px; bottom:10px; width:160px;
height:240px; overflow:hidden; border:2px groove #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:1px outset blue;
text-align:center; }
.winBody { height:218px; width:160px; overflow-x:hidden;
overflow-y:auto; border-top:1px inset blue;
padding:10px; text-indent:10px; background-color:white;
}
</style>
</head>
<body>
<div class="w">
<div class="t">Demo Win - Fixed</div>
<div class="winBody">Hello world</div>
<div>http://m.fzitv.net/</div>
</div>
</body>
<script>
//測(cè)試用，隨機(jī)產(chǎn)生一定的內(nèi)容
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
//代碼如下：
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈
下面小編就為大家?guī)?lái)一篇javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript組成、引入、輸出、運(yùn)算符基礎(chǔ)知識(shí)講解
JavaScript 被數(shù)百萬(wàn)計(jì)的網(wǎng)頁(yè)用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies，以及更多的應(yīng)用。這篇文章主要介紹了JavaScript組成、引入、輸出、運(yùn)算符基礎(chǔ)知識(shí)講解,需要的朋友可以參考下2016-12-12
JavaScript代表客戶端，而Session代表的是服務(wù)器（不知道這樣說(shuō)大家是否能夠理解）接下來(lái)介紹JavaScript如何控制Session，感興趣的朋友可以了解下啊2013-01-01
這篇文章主要介紹了img的href和src取變量及賦值的方法,需要的朋友可以參考下2014-04-04
JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入的方法,實(shí)例分析了javascript針對(duì)數(shù)值判斷與相關(guān)運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js變量作用域及可訪問(wèn)性的探討...2006-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上下移動(dòng)切換位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)操作
這篇文章主要介紹了JS前端知識(shí)點(diǎn)總結(jié)之內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)操作,簡(jiǎn)單總結(jié)分析了JS內(nèi)置對(duì)象，日期對(duì)象和定時(shí)器相關(guān)對(duì)象方法及使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript作用域 閉包的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件詳解
“工欲善其事，必先利其器” 恩，這句話我覺(jué)得說(shuō)的特別有道理，下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09