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


Posted in Javascript onSeptember 04, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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>https://3water.com/jiaoben/</address>
 </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js中开关变量使用实例
Feb 24 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python+OpenCV实现图像拼接
2020/03/05 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
优秀毕业自我鉴定
2014/02/15 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
文明礼仪主题班会
2015/08/13 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js