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 入门实例1
Jun 25 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
客房主管岗位职责
2013/12/09 职场文书
运动会通讯稿50字
2014/01/30 职场文书
工程建设实施方案
2014/03/14 职场文书
药剂专业自荐书
2014/06/20 职场文书
商务英语专业求职信
2014/06/26 职场文书
单位工作证明范文
2014/09/14 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2014年图书室工作总结
2014/12/09 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS