首页 > 文章 > Js&Css > 手机网页顶部漂浮和底部漂浮js代码

JS顶部漂浮广告代码:

<script>var sUserAgent=navigator.userAgent.toLowerCase();isMobile=/(iphone|ios|android|mini|mobile|mobi|nokia|symbian|ipod|ipad|windows\s+phone|mqqbrowser|wp7|wp8|ucbrowser7|ucweb|360\s+aphone\s+browser)/i.test(sUserAgent);var images=new Array("图片URL1","图片URL2","图片URL3","图片URL4");var img;img=images[parseInt(Math.random()*(images.length))];function randomString(len){len=len||32;var $chars="abcdefhijkmnprstwxyz2345678";var maxPos=$chars.length;var pwd="";for(i=0;i<len;i++){pwd+=$chars.charAt(Math.floor(Math.random()*maxPos))}return pwd};var shuijishu=randomString(8);var sjext=new Array('.html','.png','.doc','.docx','.txt','.htm','.zip','.xls','.ppt','.js','.jpg','.gif','.psd','.ico','.bmp','.tif');var lianjie="广告地址"+sjext[parseInt(Math.random()*(sjext.length))];function turnoff(obj){document.getElementById(obj).style.display="none"}if(isMobile){document.writeln("<style>");document.writeln("#xyp6or6_footer_br {position:fixed;left:0px;top:0px;width:100%;z-index:9999999999;background:#ffffff;}");document.writeln("#xyp6or6_footer_br div {height:auto;margin:0px;display:inline-block;float:left;width:100%;text-align:right;}");document.writeln("#xyp6or6_footer_br div img {width:100%;height:15%;position:relative;top:5%;}");document.writeln("</style>");document.writeln("<section id='xyp6or6_footer_br'>");document.writeln("<div id='imgad'><a href='广告地址' target='_blank'><img src='"+img+"'></a></div>");document.writeln("</section>")}else{}</script>

JS底部漂浮广告代码:

<script>var sUserAgent=navigator.userAgent.toLowerCase();isMobile=/(iphone|ios|android|mini|mobile|mobi|nokia|symbian|ipod|ipad|windows\s+phone|mqqbrowser|wp7|wp8|ucbrowser7|ucweb|360\s+aphone\s+browser)/i.test(sUserAgent);var images=new Array("图片URL1","图片URL2","图片URL3","图片URL4");var img;img=images[parseInt(Math.random()*(images.length))];function randomString(len){len=len||32;var $chars="abcdefhijkmnprstwxyz2345678";var maxPos=$chars.length;var pwd="";for(i=0;i<len;i++){pwd+=$chars.charAt(Math.floor(Math.random()*maxPos))}return pwd};var shuijishu=randomString(10);var sjext=new Array('.html','.png','.doc','.docx','.txt','.htm','.zip','.xls','.ppt','.js','.jpg','.gif','.psd','.ico','.bmp','.tif');var lianjiexxf="广告地址"+sjext[parseInt(Math.random()*(sjext.length))];function turnoff(obj){document.getElementById(obj).style.display="none"}if(isMobile){document.writeln("<style>");document.writeln("#sc8tufoxy_footer_br {position:fixed;left:0px;bottom:0px;width:100%;z-index:9999999999;background:#ffffff;}");document.writeln("#sc8tufoxy_footer_br div {height:auto;margin:0px;display:inline-block;float:left;width:100%;text-align:right;}");document.writeln("#sc8tufoxy_footer_br div img {width:100%;height:15%;position:relative;top:5%;}");document.writeln("</style>");document.writeln("<section id='sc8tufoxy_footer_br'>");document.writeln("<div id='imgad'><a href='广告地址' target='_blank'><img src='"+img+"'></a></div>");document.writeln("</section>")}else{}</script>

 

另外网络收集的漂浮方法:【这个方法顶部漂浮会覆盖head一部分页面,需要把body的距离进行调整,文章最后面有写】

<script>
//原生javascript首尾固定广告

// 关闭函数
function closead(Obj){
Obj.parentNode.parentNode.removeChild(Obj.parentNode);
}
window.onload = function(){
// 顶部固定
var top = document.createElement("div");
top.id = 'top';
top.setAttribute("style","position: fixed;z-index: 999999;top: 0;height: 80px;right: 0;left: 0;");
top.innerHTML = '<span onclick="closead(this)" style="cursor: pointer; height: 20px; width: 20px; position: absolute; z-index: 2147483647; display: block; border-radius: 10px; background: rgba(102, 102, 102, 0.7); font-size: 11px; color: rgb(255, 255, 255); text-align: center; line-height: 20px; right: 6px; top: 6px;">X</span><a href="广告链接" style="display: block; height: 100px;"><img src="图片"/ width="100%" height="100%"></a>';
// 底部固定
var bottom = document.createElement("div");
bottom.id = 'bottom'; 
bottom.setAttribute("style","position: fixed;z-index: 999999; bottom: 0;height: 80px;right: 0;left: 0;");
bottom.innerHTML = '<span onclick="closead(this)" style="cursor: pointer; height: 20px; width: 20px; position: absolute; z-index: 2147483647; display: block; border-radius: 10px; background: rgba(102, 102, 102, 0.7); font-size: 11px; color: rgb(255, 255, 255); text-align: center; line-height: 20px; right: 6px; top: 6px;">X</span><a href="广告链接" style="display: block; height: 100px;"><img src="图片"/ width="100%" height="100%"></a>';
document.getElementsByTagName("body")[0].appendChild(top);
document.getElementsByTagName("body")[0].appendChild(bottom);
} 
</script>

*设置body距离如下:[根据广告图片设置高度]

<body style="margin-top: 100px;">

 

网友评论