JS右下角廣告窗口代碼(可收縮、展開(kāi)及關(guān)閉)
更新時(shí)間：2015年09月04日 10:41:42 作者：企鵝
這篇文章主要介紹了JS右下角廣告窗口代碼,具有浮動(dòng)顯示、可收縮、展開(kāi)及關(guān)閉等功能,涉及javascript針對(duì)頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS右下角廣告窗口代碼。分享給大家供大家參考。具體如下：
這是一款右下角窗口JS代碼，完美的右下角，仿新浪博客的右個(gè)角彈出窗口，這款Javascript代碼在兼容性和操作舒適度方面做的相當(dāng)不錯(cuò)。調(diào)用了幾張外部的圖片，使用時(shí)自行下載吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #eee; }
.float_layer { width: 300px; border: 1px solid #aaaaaa; display:none; background: #fff; }
.float_layer h2 { height: 25px; line-height: 25px; padding-left: 10px; font-size: 14px; color: #333; background: url(images/title_bg.gif) repeat-x; border-bottom: 1px solid #aaaaaa; position: relative; }
.float_layer .min { width: 21px; height: 20px; background: url(images/min.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 25px; }
.float_layer .min:hover { background: url(images/min.gif) no-repeat 0 0; }
.float_layer .max { width: 21px; height: 20px; background: url(images/max.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 25px; }
.float_layer .max:hover { background: url(images/max.gif) no-repeat 0 0; }
.float_layer .close { width: 21px; height: 20px; background: url(images/close.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; }
.float_layer .close:hover { background: url(images/close.gif) no-repeat 0 0; }
.float_layer .content { height: 160px; overflow: hidden; font-size: 14px; line-height: 18px; color: #666; text-indent: 28px; }
.float_layer .wrap { padding: 10px; }
</style>
<script type="text/javascript">
function miaovAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent)
{
oEle.attachEvent('on'+sEventName, fnHandler);
}
else
{
oEle.addEventListener(sEventName, fnHandler, false);
}
}
window.onload = function()
{
var oDiv=document.getElementById('miaov_float_layer');
var oBtnMin=document.getElementById('btn_min');
var oBtnClose=document.getElementById('btn_close');
var oDivContent=oDiv.getElementsByTagName('div')[0];
var iMaxHeight=0;
var isIE6=window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);
oDiv.style.display='block';
iMaxHeight=oDivContent.offsetHeight;
if(isIE6)
{
oDiv.style.position='absolute';
repositionAbsolute();
miaovAddEvent(window, 'scroll', repositionAbsolute);
miaovAddEvent(window, 'resize', repositionAbsolute);
}
else
{
oDiv.style.position='fixed';
repositionFixed();
miaovAddEvent(window, 'resize', repositionFixed);
}
oBtnMin.timer=null;
oBtnMin.isMax=true;
oBtnMin.onclick=function ()
{
startMove
(
oDivContent, (this.isMax=!this.isMax)?iMaxHeight:0,
function ()
{
oBtnMin.className=oBtnMin.className=='min'?'max':'min';
}
);
};
oBtnClose.onclick=function ()
{
oDiv.style.display='none';
};
};
function startMove(obj, iTarget, fnCallBackEnd)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval
(
function ()
{
doMove(obj, iTarget, fnCallBackEnd);
},30
);
}
function doMove(obj, iTarget, fnCallBackEnd)
{
var iSpeed=(iTarget-obj.offsetHeight)/8;
if(obj.offsetHeight==iTarget)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBackEnd)
{
fnCallBackEnd();
}
}
else
{
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
obj.style.height=obj.offsetHeight+iSpeed+'px';
((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length==2)?repositionAbsolute:repositionFixed)()
}
}
function repositionAbsolute()
{
var oDiv=document.getElementById('miaov_float_layer');
var left=document.body.scrollLeft||document.documentElement.scrollLeft;
var top=document.body.scrollTop||document.documentElement.scrollTop;
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
oDiv.style.left=left+width-oDiv.offsetWidth+'px';
oDiv.style.top=top+height-oDiv.offsetHeight+'px';
}
function repositionFixed()
{
var oDiv=document.getElementById('miaov_float_layer');
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
oDiv.style.left=width-oDiv.offsetWidth+'px';
oDiv.style.top=height-oDiv.offsetHeight+'px';
}
</script>
</head>
<body style="height: 2200px">
<div class="float_layer" id="miaov_float_layer">
<h2>
<strong>這是標(biāo)題</strong>
<a id="btn_min" href="javascript:;" class="min"></a>
<a id="btn_close" href="javascript:;" class="close"></a>
</h2>
<div class="content">
<div class="wrap">
這里放置的是廣告信息，你可以填入任何的廣告內(nèi)容，比如像這樣：<strong>腳本之家是國(guó)內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁(yè)制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料</strong>腳本特效下載地址：<address>http://www.dbjr.com.cn/jiaoben/</address>
</div>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS正則表達(dá)式修飾符中multiline(/m)用法分析
這篇文章主要介紹了JS正則表達(dá)式修飾符中multiline(/m)用法,結(jié)合實(shí)例形式分析了JS正則中多行模式multiline的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
上部分我們逐一分析了各瀏覽器的可行方法，這部分將搞鼓出一個(gè)統(tǒng)一的類來(lái)實(shí)現(xiàn)跨瀏覽器的線性漸變。2009-10-10
layui監(jiān)聽(tīng)下拉選框選中值變化的方法(包含監(jiān)聽(tīng)普通下拉選框)
今天小編大家分享一篇layui監(jiān)聽(tīng)下拉選框選中值變化的方法(包含監(jiān)聽(tīng)普通下拉選框)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js實(shí)現(xiàn)電燈開(kāi)關(guān)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)電燈開(kāi)關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Layer UI表格列日期格式化及取消自動(dòng)填充日期的實(shí)現(xiàn)方法
這篇文章主要介紹了Layer UI表格列日期格式化及取消自動(dòng)填充日期的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript中文件上傳API，介紹了上傳文件API的使用方法，感興趣的小伙伴們可以參考一下2016-04-04
Firefox/Safari/Chrome/Opera瀏覽器中使用exec方法時(shí)可以去掉“exec”用 “正則直接量+()” 方式使用2011-05-05
這篇文章主要為大家介紹了JSON常用解析框架使用操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
BootStrap實(shí)現(xiàn)手機(jī)端輪播圖左右滑動(dòng)事件
用bootstrap做出的項(xiàng)目輪播圖在手機(jī)端不能滑動(dòng)，為此找了好多插件、框架。但是都不能和bootstrap良好的結(jié)合。經(jīng)過(guò)一番折騰終于找到了解決方法，下面小編通過(guò)本文給大家簡(jiǎn)單介紹下2016-10-10