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 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jquery滚动特效集锦
Jun 03 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
vue.js学习之递归组件
Dec 13 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 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
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
甜点店创业计划书
2014/01/27 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
单位租车协议书
2015/01/29 职场文书
安全保证书格式
2015/02/28 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
html5调用摄像头实例代码
2021/06/28 HTML / CSS
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Python测试框架pytest高阶用法全面详解
2022/06/01 Python