js对联广告,顶部浮动广告,固定位置广告插件

迷南。 2021-09-27 04:50 485阅读 0赞

整个广告放在一个js文件中,所以,需要先在模板上引入这个baidu.js文件  
广告位置会自动插入,一般不需要找位置.  
因为js中有一个固定位置的广告,所以.哪个位置需要显示这个固定广告,则直接把js放在相应位置即可.放好后,其它的对联广告等会自动显示  
baidu.js先引入

<div class="abc"><script src="js/baidu.js"></script></div>

baidu.js中的内容为

var top2 = "https://cuntuku.com/images/2018/07/21/txmg7.gif"; 
            //手机端头部,不显示时,可能变量冲突, 可以换个变量名
    
            var  left = 'http://wx2.sinaimg.cn/mw690/0060lm7Tly1ftgf963phwj30b40hk7ox.jpg' //左侧对联图片
    
            var right = 'http://wx1.sinaimg.cn/orj480/0060lm7Tly1ftgbq3dpsej30b40hktt3.jpg' //右侧对联图片
    
            var auto = 'https://cuntuku.com/images/2018/07/21/txmg7.gif'  // pc固定
    
            var pageWidth = 980;  //页面内容的宽度
            var slidWidth = 200; //左右两侧的图片宽度
            var slidHeight = 300; //左右两侧的图片高度
            var autoHeight = 220; //固定图片高度
            var autoTop = 0; //固定图片距离顶部的位置
            var phoneHeight = 150; //手机顶部图片高度
    
            var link1 = 'http://www.yabovip55.cc'; //手机顶部链接
            var link2 = 'http://www.yabo2018.net/?i_code=20082'; //对联左侧链接
            var link3 = 'http://www.yabo2018.net/?i_code=20082'; //对联右侧链接
            var link4 = 'http://www.yabo2018.net/?i_code=20082'; //固定位置链接
    
            var style = document.createElement('style');
            style.innerHTML = '#fixed-left,#fixed-right{position: fixed;width:'+ slidWidth +'px;height: '+ slidHeight +'px;margin-top: -'+ slidHeight/2 +'px;z-index:99999;top:50%;}#fixed-left{left:50%;margin-left:-'+ (pageWidth/2+slidWidth) +'px;}#fixed-right{right:50%;margin-right:-'+ (pageWidth/2+slidWidth) +'px;}#fixed-left img,#fixed-top img,#fixed-right img,#fixed-auto img{display: block;width:100%;height: 100%;}#fixed-top,{position: fixed;width: '+ pageWidth +'px;left:50%;margin-left: -'+ pageWidth/2 +'px;}#fixed-top{top:0;height: '+phoneHeight+'px}#fixed-auto{width: 100%;height:'+ autoHeight +'px}.fclose{position: absolute;right: 0;top: 0;background: red;color:#fff;padding:2px 3px;font-size: 14px;}';
            document.head.appendChild(style);
    
            //对联广告
            var fixedleftright = document.createElement('div');
            fixedleftright.innerHTML = '<div id="fixed-left"><a href="'+ link2 +'"><img src="'+ left +'" alt=""></a><div id="fclose-left" class="fclose">关闭</div></div><div id="fixed-right"><a href="'+ link3 +'"><img src="'+ right +'" alt=""></a>\ <div id="fclose-right" class="fclose">关闭</div></div>';
            document.getElementsByTagName('body')[0].appendChild(fixedleftright);
    
            //顶部广告,手机专用
             var fixedtop = document.createElement('div');
           fixedtop.innerHTML = '<div id="fixed-top"><a href="'+ link1 +'"><img src="'+ top2 +'" alt=""></a><div id="fclose-top" class="fclose">关闭</div></div>';
            document.getElementsByTagName('body')[0].prepend(fixedtop);
    
            // 固定广告
            fixedauto = '<div id="fixed-auto"><a href="'+link4+'"><img src="'+ auto +'" alt=""></a><div id="fclose-bottom" class="fclose"></div></div>';
             document.writeln(fixedauto);//直接在引入位置显示固定广告
             if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
       //在手机上,对联及固定广告都隐藏
    
            document.getElementById('fixed-left').style.display = "none";
            document.getElementById('fixed-right').style.display = "none";
            document.getElementById('fixed-auto').style.display = "none";
              } else {
       //电脑上,顶部广告直接隐藏
                document.getElementById('fixed-top').style.display = "none";
              }
              var fclose = document.getElementsByClassName('fclose');
              for (var i = 0; i < fclose.length; i++){
                fclose[i].onclick = function(){ 
                  this.parentNode.style.display = "none";
                }
              }

![请打赏谢谢大佬][70]

[70]: /images/20210923/9e459cef4fb4435ab65edc6755bc88af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，485人围观）

还没有评论，来说两句吧...

相关阅读

相关对联广告（jQuery）

对联广告（jQuery）上代码！！！ <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月04日 10:29/ 0 赞/ 10 阅读

相关使用谷歌插件屏蔽固定广告

一：下载谷歌广告屏蔽器插件： > 官方网站地址（外网很慢）：https://chrome-extension-downloader.com/ > 云盘地址： >

小灰灰/ 2022年12月18日 00:54/ 0 赞/ 183 阅读

相关 java 屏蔽广告js_手机端JS屏蔽广告

最近遇到有些广告的问题，首先是在手机端，可能是用户访问了一些小网站的，(你懂得)，然后在访问我的网站时，会带小广告过来，通常是wifi被dns劫持的情况下导入到广告脚本， 1

快来打我*/ 2022年11月06日 04:50/ 0 赞/ 234 阅读

相关 Jquery 漂浮广告的插件

前提引入jquery 这是必然的 <script src="style/js/jquery.min.js"></script> 引入js插件 <scrip

r囧r小猫/ 2022年08月10日 09:50/ 0 赞/ 187 阅读

相关 JS 左右两侧浮动广告

<html> <title>左右两侧浮动广告</title> <head> </head> <body> <table styl

╰+攻爆jí腚メ/ 2022年08月06日 00:27/ 0 赞/ 219 阅读

相关 QQ/Chrome浏览器一键去广告--去广告插件安装教程(广告终结者)

每当查资料翻新闻总有广告出来恶心人，神烦。好在我们有浏览器去广告插件(应用) > 支持浏览器：<chrome><360安全浏览器><360极速浏览器><QQ浏览

绝地灬酷狼/ 2022年06月10日 06:40/ 0 赞/ 963 阅读

相关 css实现网页对联广告

效果如图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

深藏阁楼爱情的钟/ 2022年03月21日 07:39/ 0 赞/ 289 阅读

相关 Chrome插件屏蔽网页关键字、去浮动广告

manifest.json \{ "manifest\_version": 2, "name": "My Cleanner", "ve

我就是我/ 2021年12月11日 18:49/ 0 赞/ 806 阅读

相关 js对联广告,顶部浮动广告,固定位置广告插件

整个广告放在一个js文件中,所以,需要先在模板上引入这个baidu.js文件广告位置会自动插入,一般不需要找位置. 因为js中有一个固定位置的广告,所以.哪个位置需要

迷南。/ 2021年09月27日 04:50/ 0 赞/ 486 阅读

相关 JavaScript完成简单的对联广告

非常简单的使用方法，只需在需要加入广告的页面引入一个js文件即可。 javascript文件（ad.js）如下: lastScrollY = 0;

梦里梦外;/ 2021年06月10日 20:41/ 0 赞/ 567 阅读