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 相关文章推荐
jquery事件与函数的使用介绍
Sep 29 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
js实现掷骰子小游戏
Oct 24 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python日志syslog使用原理详解
2020/02/18 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
师范毕业生求职自荐信
2013/09/25 职场文书
施工班组长岗位职责
2014/01/05 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
会计岗位说明书
2014/07/29 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
综合素质自我评价评语
2015/03/06 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Python绘制散乱的点构成的图的方法
2022/04/21 Python