js实现左右两侧浮动广告
程序员文章站
2022-06-14 11:57:57
本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下
左右两侧浮动广告<...</div>
<div class="content">
<p>本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下<br></p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1390294.html">
node.js到底要不要加分号浅析 </a>
</p>
<p>
下一篇： <a href="/article/1390296.html">
Vue路由切换时的左滑和右滑效果示例 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2082348.html" target="_blank" title="Swiper.js实现移动端元素左右滑动">
<h2>
Swiper.js实现移动端元素左右滑动 </h2>
</a>
</li>
<li>
<a href="/article/2015531.html" target="_blank" title="无需JS和jQuery代码实现CSS3鼠标浮动放大图片">
<h2>
无需JS和jQuery代码实现CSS3鼠标浮动放大图片 </h2>
</a>
</li>
<li>
<a href="/article/1993039.html" target="_blank" title="js实现鼠标左右移动，图片也跟着移动效果">
<h2>
js实现鼠标左右移动，图片也跟着移动效果 </h2>
</a>
</li>
<li>
<a href="/article/1992988.html" target="_blank" title="原生JS实现图片左右轮播">
<h2>
原生JS实现图片左右轮播 </h2>
</a>
</li>
<li>
<a href="/article/1966434.html" target="_blank" title="JS使用cookie实现只出现一次的广告代码效果">
<h2>
JS使用cookie实现只出现一次的广告代码效果 </h2>
</a>
</li>
<li>
<a href="/article/1926178.html" target="_blank" title="用js屏蔽被http劫持的浮动广告实现方法">
<h2>
用js屏蔽被http劫持的浮动广告实现方法 </h2>
</a>
</li>
<li>
<a href="/article/1884193.html" target="_blank" title="JS实现简单的浮动碰撞效果示例">
<h2>
JS实现简单的浮动碰撞效果示例 </h2>
</a>
</li>
<li>
<a href="/article/1879032.html" target="_blank" title="js实现上下左右弹框划出效果">
<h2>
js实现上下左右弹框划出效果 </h2>
</a>
</li>
<li>
<a href="/article/1858286.html" target="_blank" title="jQuery实现的无缝广告图片左右滚动功能详解">
<h2>
jQuery实现的无缝广告图片左右滚动功能详解 </h2>
</a>
</li>
<li>
<a href="/article/1833379.html" target="_blank" title="vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）">
<h2>
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果） </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>