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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章是小编日常收集整理的有关bootstrap 常用组件包括Bootstrap 面板（Panels），Bootstrap 多媒体对象（Media Object）知识，非常不错，需要的朋友参考下吧2017-03-03
今天小编就为大家分享一篇js实现前面自动补全位数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
JavaScript开发Chrome浏览器扩展程序UI的教程
Chrome扩展开发API中提供了一些关于UI外观的操作,如果是刚刚上手的话首先需要了解Browser Actions、Omnibox、选项页等,在这篇JavaScript开发Chrome浏览器扩展程序UI的教程中,我们先来回顾一下基本知识:2016-05-05
这篇文章主要给大家介绍了关于JS创建自定义对象的六种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了JavaScript 自定义弹出窗口的实现代码,实现一采用html编写弹出窗口内容,实现二采用JavaScript编写弹出窗口内容,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-09-09
这篇文章主要介绍了JavaScript中eval函数的问题,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了动态显示可输入的字数提示还可以输入的字数,需要的朋友可以参考下2014-04-04
随着移动网络的发展,越来越多的人使用手机等移动端浏览网页办公,那么如果在手机打开页面的时候显示大大的联盟广告，用户体验度会非常差，经过一番研究，用下面的方法实现了移动端浏览器不显示PC端广告。2015-10-10
这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JS简单实现城市二级联动选择插件的方法,涉及javascript实现select遍历与设置技巧,非常简单实用,需要的朋友可以参考下2015-08-08
最新评论