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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
简单的JS轮播图代码
Jul 18 Javascript
js只执行1次的函数示例
Jul 20 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
BootStrap中的表单大全
Sep 07 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
JS代码编译器Monaco使用方法
Jun 11 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python底层封装实现方法详解
2020/01/22 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
华润集团网上药店:健一网
2016/09/19 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
职工代表大会主持词
2014/04/01 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
党员四风剖析材料
2014/08/27 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby