JS右下角广告窗口代码(可收缩、展开及关闭)

2024-09-29 00:00:12

本文实例讲述了JS右下角广告窗口代码。分享给大家供大家参考。具体如下：

这是一款右下角窗口JS代码，完美的右下角，仿新浪博客的右个角弹出窗口，这款Javascript代码在兼容性和操作舒适度方面做的相当不错。调用了几张外部的图片，使用时自行下载吧。

运行效果截图如下：

在线演示地址如下：

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>这是标题</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">
 这里放置的是广告信息，你可以填入任何的广告内容，比如像这样：<strong>我们是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料</strong>脚本特效下载地址：<address>http://www.jb51.net/jiaoben/</address>
 </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS仿QQ好友列表展开、收缩功能(第一篇)

效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <
JS+CSS实现DIV层的展开、收缩效果

本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,
JavaScript设置FieldSet展开与收缩

JavaScript方法代码: 复制代码代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen
js实现div层缓慢收缩与展开的方法

本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu
JS仿QQ好友列表展开、收缩功能(第二篇)

在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

复制代码代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&
JS实现固定在右下角可展开收缩DIV层的方法

本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
JS右下角广告窗口代码(可收缩、展开及关闭)

本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
JS弹出窗口代码大全(详细整理)

如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口复制代码代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口复制代码代码如下: <html&g
超详细的JS弹出窗口代码大全

如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口代码如下: <html> <bod
js漂浮广告实现代码（合集经典）符合W3C

第一种漂浮广告不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. 漂浮广告 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { var L=T=0 var R= document.body.c
js漂浮广告实现代码

本文实例讲述了js实现漂浮广告的方法.分享给大家供大家参考.具体如下: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script typ
js 右下角弹窗效果代码(IE only)

右下角弹窗效果练习 function $(obj){ return document.getElementById(obj); } function pop(obj){ var h = parseInt($("popDiv").currentStyle.height); $("popDiv").style.height = (h + obj) + "px"; if(parseInt($("popDiv").style.heig
超酷右下浮出广告窗口代码

window.onload = enetgetMsg; window.onresize = enetresizeDiv; window.onerror = function(){} var enetdivTop,enetdivLeft,enetdivWidth,enetdivHeight,enetdocHeight,enetdocWidth,enetobjTimer,i = 0; function enetgetMsg() { try{ enetdivTop = parseInt(documen
jquery实现浮动在网页右下角的彩票开奖公告窗口代码

本文实例讲述了jquery实现浮动在网页右下角的彩票开奖公告窗口.分享给大家供大家参考.具体如下: 这是一个浮动在网页右下角的彩票开奖公告窗口,完全可当作一个右下角广告的代码来使用,而且效果中加入了简洁的动画功能,浮动窗口是从下往上滑出的,避免单调:另外本浮动窗口带有"关闭"功能,用户可以关闭它. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom-alert-dlg-codes/ 具体代码如下: &
js右下角与漂浮广告代码(兼容多浏览器)

ie6 7 8 ff3.5 3.6 chrome 4.1.2 safari 主要代码如下: 我们右下角广告代码 html,body{ padding:0; margin:0; } 我在随平滚我静止不动 function scrollx(p){ var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAg
JS实现可点击展开与关闭的左侧广告代码

本文实例讲述了JS实现可点击展开与关闭的左侧广告代码.分享给大家供大家参考.具体如下: 这里介绍的是JS实现网页上可点击展开.关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击"显示"的时候,它会重新打开广告,这种广告可以提高网页的用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-close-style-ad

JS右下角广告窗口代码(可收缩、展开及关闭)

相关推荐

随机推荐