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代码
Mar 25 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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中使用正则表达式进行查找替换
2013/06/13 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php检测文本的编码
2015/07/26 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python要安装在哪个盘
2020/06/15 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
教师自荐信
2013/12/10 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
建筑横幅标语
2014/10/09 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
如何解决php-fpm启动不了问题
2021/11/17 PHP
vue递归实现树形组件
2022/07/15 Vue.js