JS簡(jiǎn)單實(shí)現(xiàn)浮動(dòng)窗口效果示例
本文實(shí)例講述了JS簡(jiǎn)單實(shí)現(xiàn)浮動(dòng)窗口效果。分享給大家供大家參考,具體如下:
HTML部分:
<!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=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <style type="text/css"> *{ margin:0; padding:0;} a img{ border:0;} </style> </head> <body> <div style="height:2000px; background:#ccc; display:none;"> </div> <!--div id="floatAd" style=" position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 2147483647; left: 50%; margin-left: -240px !important; top: 50%; margin-top: -210px !important; background:url(images/onlineSay.jpg) no-repeat; width:487px; height:350px; cursor:pointer;"> <div onclick="closeFAd();" style=" width:26px; height:26px; float:right;"></div> <div style="width:487px; height:320px; float:right;" onclick="open_online();"></div> </div> <div id="floatSide" style=" width:141px; height:579px; position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 99999; right:0; top:6%; background:url(images/onlineTel.gif);cursor:pointer;" onclick="open_online();></div--> </body> </html> <script type="text/javascript" src="online.js"></script>
JS部分:
// JavaScript Document //浮動(dòng)廣告圖片 var floatAdImg = "images/onlineSay.jpg"; //浮動(dòng)側(cè)欄圖片 var floatSideImg = "images/onlineTel.gif"; //打開(kāi)在線溝通 function open_online() { window.open('http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325'); } //浮動(dòng)廣告 document.writeln("<div id=\"floatAd\" style=\" position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 2147483647; left: 50%; margin-left: -240px !important; top: 50%; margin-top: -210px !important; background:url("+floatAdImg+") no-repeat; width:487px; height:350px; cursor:pointer; display:none; \">"); document.writeln("<div onclick=\"closeFAd();\" style=\" width:26px; height:26px; float:right;\"></div>"); document.writeln("<div style=\"width:487px; height:320px; float:right;\" onclick=\"open_online();\"></div>"); document.writeln("</div>"); //浮動(dòng)側(cè)欄 document.writeln("<div style=\" width:141px; height:579px; position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 99999; right:0; top:6%; background:url("+floatSideImg+");cursor:pointer;\" onclick=\"open_online();\"></div>"); //關(guān)閉浮動(dòng)廣告 function closeFAd() { document.getElementById('floatAd').style.display = 'none'; } //打開(kāi)浮動(dòng)廣告 function showFAd() { document.getElementById('floatAd').style.display = 'block'; } //打開(kāi)浮動(dòng)窗口 function showFloat() { document.getElementById('floatAd').style.display = 'block'; } //打開(kāi)窗口 20 秒僅執(zhí)行一次 setTimeout(showFAd,20000); //每個(gè) 30 秒執(zhí)行一次 setInterval(showFloat,30000);
效果圖如下:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- JS實(shí)現(xiàn)簡(jiǎn)單易用的手機(jī)端浮動(dòng)窗口顯示效果
- JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼
- jquery實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右下角的彩票開(kāi)獎(jiǎng)公告窗口代碼
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- jQuery之浮動(dòng)窗口實(shí)現(xiàn)代碼(兩種方法)
- 多瀏覽器支持的右下角浮動(dòng)窗口
- JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件
- Android利用浮動(dòng)窗口提示用戶操作
相關(guān)文章
JavaScript 異步調(diào)用框架 (Part 5 - 鏈?zhǔn)綄?shí)現(xiàn))
在上一篇文章里面,我們?yōu)楫惒秸{(diào)用框架設(shè)計(jì)了一種鏈?zhǔn)秸{(diào)用方式,來(lái)增強(qiáng)異步調(diào)用隊(duì)列的代碼可讀性,現(xiàn)在我們就來(lái)編寫實(shí)現(xiàn)這部分功能的代碼。2009-08-08原生JS分頁(yè)展示效果(點(diǎn)擊分頁(yè)看效果)
特別酷的分頁(yè)展示效果,原生JS實(shí)現(xiàn),點(diǎn)擊分頁(yè)看效果2012-11-11js圖片上傳中file、bolb、base64圖片之間的相互轉(zhuǎn)化
這篇文章主要介紹了js圖片上傳中file、bolb、base64圖片之間的相互轉(zhuǎn)化,blob轉(zhuǎn)file,blob轉(zhuǎn)base64,base64轉(zhuǎn)file,使用canvas壓縮圖片,需要的朋友可以參考下2022-05-05json數(shù)據(jù)處理技巧(字段帶空格、增加字段、排序等等)
json數(shù)據(jù)處理技巧例如:正常取值、字段帶空格、賦值、增加字段、排序、拷貝、數(shù)組添加和刪除等,詳細(xì)請(qǐng)參考本文或許對(duì)你有所幫助2013-06-06