js实现左右两侧浮动广告


Posted in Javascript onJuly 09, 2018

本文实例为大家分享了js实现左右浮动广告展示的具体代码,供大家参考,具体内容如下

<html>
<title>左右两侧浮动广告</title>
<head>
</head>
<body>
<table style="background-color:#EEEEE2;width:1024px;height:2000px;t" align="center">
 <tr><td> </td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
 var showad = true;
 var Toppx = 60; //上端位置
 var AdDivW = 100; //宽度
 var AdDivH = 300; //高度
 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:;" rel="external nofollow" rel="external nofollow" mce_href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="hidead()" style="color:red;text-decoration:none;font-size:12px;" mce_style="color:red;text-decoration:none;font-size:12px;">关闭</a></div>'
 var AdContentHtml = '<div align="center" style="color:green;font-size:23pt;font-family:黑体;" mce_style="color:green;font-size:23pt;font-family:黑体;"><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 (document.body.clientWidth < 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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
JS逻辑运算符短路操作实例分析
Jul 09 #Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 #Javascript
You might like
PHP的FTP学习(三)
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php中adodbzip类实例
2014/12/08 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python简单文本处理的方法
2015/07/10 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python 自动识别并连接串口的实现
2021/01/19 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
领导检查欢迎词
2014/01/14 职场文书
监察建议书范文
2014/03/12 职场文书
公休请假条
2014/04/11 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL