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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue 插件的方法代码详解
2019/06/06 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
工程售后服务承诺书
2014/05/21 职场文书
党员干部一句话承诺
2014/05/30 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
五好家庭事迹材料
2014/12/20 职场文书
检讨书范文1000字
2015/01/28 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android