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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
vue样式穿透 ::v-deep的具体使用
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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
小学门卫岗位职责
2013/12/17 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
公司辞职信模板
2015/05/13 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技