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 相关文章推荐
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
浅谈javascript中的闭包
May 13 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
JavaScript中如何判断一个值的类型
Sep 15 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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
PHP4引用文件语句的对比
2006/10/09 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
python自动化测试实例解析
2014/09/28 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
大专会计自我鉴定
2014/02/06 职场文书
上班看电影检讨书
2014/02/12 职场文书
高级工程师英文求职信
2014/03/19 职场文书
元宵晚会主持词
2014/03/25 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2015年教师节活动总结
2015/03/20 职场文书
单位推荐信范文
2015/03/27 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers