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 学习笔记 选择器之二
Jul 23 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript 常见功能汇总
Jun 11 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
解读Vue组件注册方式
May 15 Vue.js
详解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定时任务延缓执行的实现
2014/10/08 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python安装后的目录在哪里
2020/06/21 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
购房意向书
2014/04/01 职场文书
公司承诺书怎么写
2014/05/24 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python学习之迭代器详解
2022/04/01 Python
Django框架之路由用法
2022/06/10 Python
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript