網(wǎng)頁中可關(guān)閉的漂浮窗口實現(xiàn)可自行調(diào)節(jié)
更新時間：2013年08月20日 15:19:36 作者：
廣告式的漂浮窗口，想必大家并不陌生吧，下面為大家簡單介紹下具體的實現(xiàn)，有需要的朋友可以參考下
注釋部分為廣告的左右調(diào)節(jié)，可以自行設(shè)定
<!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>
<title>網(wǎng)頁中可關(guān)閉的漂浮窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body style="background-color:#09C">
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">關(guān)閉</font><br/>
點擊這里，關(guān)閉廣告?。?！<br><a href="/jscss/"><img src="img/ads1.png"></a>
</div>
<script type="text/javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
//adst.left = ( bodyfrm.clientWidth -155) + "px";
function moveR()
{
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
//adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:1200px;"></div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!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>
<title>網(wǎng)頁中可關(guān)閉的漂浮窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body style="background-color:#09C">
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">關(guān)閉</font><br/>
點擊這里，關(guān)閉廣告?。?！<br><a href="/jscss/"><img src="img/ads1.png"></a>
</div>
<script type="text/javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
//adst.left = ( bodyfrm.clientWidth -155) + "px";
function moveR()
{
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
//adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:1200px;"></div>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)音樂自動切換和輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了一些你不知道的JavaScript異步相關(guān)知識，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
echarts幾個公司內(nèi)部數(shù)據(jù)可視化圖表必收藏
最近公司有一個需求，要做一個數(shù)據(jù)可視化的頁面，所有的圖表都在下面，做這些都是本人自己寫的，全部都是真是的項目中的代碼，包含有柱狀圖、折線圖、水球圖以及散點圖，這里直接打出來給大家練手，希望大家多多支持，如果這篇文章對您有用的話必須收藏2022-08-08
js form 驗證函數(shù) 當(dāng)前比較流行的錯誤提示
js數(shù)據(jù)驗證、js email驗證、js url驗證、js長度驗證、js數(shù)字驗證等2009-06-06
這篇文章介紹了頂部緩沖下拉菜單導(dǎo)航特效的JS代碼，有需要的朋友可以參考一下2013-08-08
echarts柱狀圖背景重疊組合而非并列的實現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于echarts柱狀圖背景重疊組合而非并列的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多圖上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了ajax級聯(lián)菜單實現(xiàn)方法,結(jié)合實例形式分析了基于ajax與后臺php交互實現(xiàn)級聯(lián)菜單功能的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法
這篇文章主要介紹了JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素的獲取、屬性設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了通過webpack引入第三方庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07