javascript實現(xiàn)的固定位置懸浮窗口實例
更新時間：2015年04月30日 09:15:43 作者：休閑生活文化
這篇文章主要介紹了javascript實現(xiàn)的固定位置懸浮窗口,以一個完整實例形式詳細(xì)分析了javascript實現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)的固定位置懸浮窗口。分享給大家供大家參考。具體實現(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://www.dbjr.com.cn/</div>
</div>
</body>
<script>
//測試用，隨機(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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern)實例詳解
這篇文章主要介紹了JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern),簡單說明了觀察者模式的概念、原理并結(jié)合實例形式詳細(xì)給出了觀察者模式的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2017-10-10
微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript實現(xiàn)獲取設(shè)備網(wǎng)絡(luò)連接信息
作為前端開發(fā)，做好用戶體驗是很重要的，日常開發(fā)中我們經(jīng)?？梢杂龅接脩艟W(wǎng)速慢導(dǎo)致靜態(tài)資源加載慢，從而給影響用戶體驗，所以本文來和大家分享一個有趣的API，可以實現(xiàn)獲取網(wǎng)絡(luò)信息2023-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)旋轉(zhuǎn)的星空效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了可拖拽組件slider.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
關(guān)于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios
本文給大家介紹BootStrap modal 在IOS9中不能彈出的問題以及bootstrap datepicker 在bootstrap modal中不顯示問題的解決方案，非常不錯，需要的朋友參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)數(shù)字時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JavaScript設(shè)計模式發(fā)布訂閱模式，發(fā)布訂閱設(shè)計模式是和觀察者設(shè)計模式基本上相同，但是他們兩個設(shè)計模式不同的是發(fā)布訂閱者擁有一個事件處理中心而觀察者并沒有2022-06-06
Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解
這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04