JS实现可关闭的对联广告效果代码


Posted in Javascript onSeptember 14, 2015

本文实例讲述了JS实现可关闭的对联广告效果代码。分享给大家供大家参考。具体如下:

这是非常经典的一款对联广告代码,带有关闭按钮,用户可以自行关掉广告,另外,广告的垂直位置会随着滚动条的变化自动定位,也就是拖动浏览器滚动条的时候广告始终显示,不会被隐藏掉,现在很多网站都在用的对联广告代码。

运行效果截图如下:

JS实现可关闭的对联广告效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>对联广告</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="margin:0px;">
<div align="center">
 <center>
 <table border="1" width="776" height="3000" cellspacing="0" cellpadding="0">
 <tr>
 <td width="100%" valign="top"><div align="center">页面区域</div></td>
 </tr>
 </table>
 </center>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var showad = true;
var Toppx = 60;//上端位置
var AdDivW = 100;//宽度
var AdDivH = 360;//高度
var PageWidth = 800;//这个参数决定是否出现左右滚动条
var MinScreenW = 1024; //显示广告的最小屏幕宽度象素
var ClosebuttonHtml = '<div align="right" style="position: absolute;top:0px;right:0px;margin:2px;padding:2px;z-index:2000;"><a href="javascript:;" onclick="hidead()" style="color:red;text-decoration:none;font-size:12px;">关闭</a></div>'
var AdContentHtml = '<div align="center"><br><br>广<br>告<br>内<br>容</div>';
document.write ('<div id="Javascript.LeftDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>');
document.write ('<div id="Javascript.RightDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>');
function scall(){
 if(!showad){return;}
 if (window.screen.width<MinScreenW){
  alert("临时提示:\n\n显示器分辨率宽度小于"+MinScreenW+",不显示广告");
  showad = false;
  document.getElementById("Javascript.LeftDiv").style.display="none";
  document.getElementById("Javascript.RightDiv").style.display="none";
  return;
 }
 var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;
 document.getElementById("Javascript.LeftDiv").style.display="";
 document.getElementById("Javascript.LeftDiv").style.top=document.body.scrollTop+Toppx;
 document.getElementById("Javascript.LeftDiv").style.left=document.body.scrollLeft+Borderpx;
 document.getElementById("Javascript.RightDiv").style.display="";
 document.getElementById("Javascript.RightDiv").style.top=document.body.scrollTop+Toppx;
 document.getElementById("Javascript.RightDiv").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.RightDiv").offsetWidth-Borderpx;
}
function hidead()
{
 showad = false;
 document.getElementById("Javascript.LeftDiv").style.display="none";
 document.getElementById("Javascript.RightDiv").style.display="none";
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
</body>
</html>

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

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
js实现滑动进度条效果
Aug 21 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
分公司经理岗位职责
2013/11/11 职场文书
设计师个人求职信范文
2014/02/02 职场文书
消防应急演练方案
2014/02/12 职场文书
党日活动总结
2014/05/07 职场文书
幼儿园标语大全
2014/06/19 职场文书
师德师风自查总结
2014/10/14 职场文书
英文慰问信
2015/02/14 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android