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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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实现登录验证码校验功能
2018/05/17 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python学习基础之循环import及import过程
2018/04/22 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
合同范本之电脑出租
2019/08/13 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电