js实现左右两侧浮动广告

发布时间:2020-09-29 09:19:15 作者:小爷胡汉三
来源:脚本之家 阅读:195

本文实例为大家分享了js实现左右浮动广告展示的具体代码,供大家参考,具体内容如下

<html>
<title>左右两侧浮动广告</title>
<head>
</head>
<body>
<table  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" ><a href="javascript:;" rel="external nofollow" rel="external nofollow" mce_href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="hidead()"  mce_>关闭</a></div>'
 var AdContentHtml = '<div align="center"  mce_><br><br>广告</div>';
 document
  .write('<div id="Javascript.LeftDiv" >'
   + ClosebuttonHtml
   + '<div>'
   + AdContentHtml
   + '</div></div>');
 document
  .write('<div id="Javascript.RightDiv" >'
   + 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. html中实现指示器左右两侧排列的轮播的方法
  2. js如何实现下拉列表左右选择?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 浮动广告

上一篇:HTML所有的标签

下一篇:微信小程序云开发实现增删改查功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》