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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python类的用法实例浅析
2015/05/27 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python 容器总结整理
2017/04/04 Python
Python3 合并二叉树的实现
2019/09/30 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
项目经理的岗位职责
2013/11/23 职场文书
旷课检讨书2000字
2014/01/14 职场文书
2014年端午节活动方案
2014/03/11 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
安全生产标语大全
2014/10/06 职场文书
毕业生对母校寄语
2015/02/26 职场文书
电力安全学习心得体会
2016/01/18 职场文书