脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现左右浮动广告

js实现左右两侧浮动广告

 更新时间：2018年07月09日 11:43:55   作者：小爷胡汉三  
这篇文章主要为大家详细介绍了js实现左右两侧浮动广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序实现音乐播放页面布局

    微信小程序实现音乐播放页面布局

    这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JavaScript 点击触发复制功能实例详解

    JavaScript 点击触发复制功能实例详解

    这篇文章主要介绍了JavaScript 点击触发复制功能实例详解,需要的朋友可以参考下
    2018-11-11
  • 由document.body和document.documentElement想到的

    由document.body和document.documentElement想到的

    不知道大家对这个标题有没有想法，反正此前我一直把他们混为了一谈。其实不然，首先需有个“标准”的概念。
    2009-04-04
  • 28个JavaScript常用字符串方法以及使用技巧总结

    28个JavaScript常用字符串方法以及使用技巧总结

    这篇文章主要给大家介绍了28个JavaScript常用字符串方法以及使用技巧的相关资料,文中统计的方法都非常实用,无论是日常工作还是面试,都建议多看一看,需要的朋友可以参考下
    2021-09-09
  • javaScript中一些常见的数据类型检查校验

    javaScript中一些常见的数据类型检查校验

    最近在面试的时候又被问到JS中检查校验数据类型的方法,所以这篇文章主要给大家介绍了关于javaScript中一些常见的数据类型检查校验的相关资料,需要的朋友可以参考下
    2022-05-05
  • 微信小程序实现单选功能

    微信小程序实现单选功能

    这篇文章主要为大家详细介绍了微信小程序实现单选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Js实现当前点击a标签变色突出显示其他a标签回复原色

    Js实现当前点击a标签变色突出显示其他a标签回复原色

    当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下
    2013-11-11
  • Javascript学习之谈谈JS的全局变量跟局部变量(推荐)

    Javascript学习之谈谈JS的全局变量跟局部变量(推荐)

    这篇文章主要介绍了Javascript学习之谈谈JS的全局变量跟局部变量虽然脚本之家小编以前发过，但还是这篇文章整理的比较好，需要的朋友可以参考一下
    2016-08-08
  • 5个书写JavaScript代码的坏习惯，看看你中枪了没？

    5个书写JavaScript代码的坏习惯，看看你中枪了没？

    这篇文章主要介绍了5个书写JavaScript代码的坏习惯，看看你中枪了没？,本文指出了你没有使用命名空间、变量定义的东一个西一个、Javascript的变量范围、Javascript的面向对象、new关键字等问题,需要的朋友可以参考下
    2014-11-11
  • JS对大量数据进行多重过滤的方法

    JS对大量数据进行多重过滤的方法

    今天在工作中遇到一个问题，当前端通过Ajax从后端取得了大量的数据，需要根据一些条件过滤，但是发现写的过滤方法有问题，后来仔细的查找问题，通过网上的资料终于解决了这个问题，现在将解决的过程以及解决方法分享给大家，有需要的朋友们可以参考借鉴。
    2016-11-11

最新评论