移动底飘js改成移动顶部浮漂-一技之长

这个方法以前通过css实现过，今天再用js是做下，一共两种方法，可根据自己的实际情况修改后融入自己的网站中。

方法一

<script>
var mobileRegex = /Android|webOS|iPhone|iPod|BlackBerry/i;
if(mobileRegex.test(navigator.userAgent)){
document.write('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">');
document.write('<div id="fage" style="position:fixed; display:block; z-index: 2147483646; left: 0px; width: 100%; text-align: center; top: 0px;">');
document.write('<a href="#" target="_blank" style="display:block; width:100%; float:left; text-align:center; background-size:100% auto !important; position:relative; background:url() rgba(0,0,0,0) no-repeat center;"></a>');
document.write('<a onclick="close_fage(this)" style="position: absolute; top: 1px; right: 1px; color: red;">×关闭</a>');
document.write('</div>');
}
</script>

这段代码的主要功能是在移动设备上显示一个固定在屏幕顶部的广告，并且有一个关闭按钮。这段代码首先检查用户代理是否包含任何移动设备的标识符，如果是，则添加一个视口元标签以适应移动设备的屏幕宽度，并显示广告。广告由一个链接组成，该链接打开一个新的窗口并显示一个图像。同时，广告还包括一个关闭按钮，点击该按钮将调用close_fage函数，该函数隐藏广告。

方法二

<script>
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
document.writeln("<meta name=\'viewport\' content=\'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\'>");
document.writeln("<div id=\'fage\' style=\'position:fixed; display:block;z-index: 2147483646; left: 0px; width: 100%; text-align: center; top: 0px;\'>");
//document.writeln("<a onclick=\'close_fage(this)\'></a>");
document.writeln("<div style=\'display:inline-block;vertical-align:middle;width:100%;\'>");
document.writeln("<a href=\'#' target=\'_blank\' style=\'margin: 0;padding: 0;border: 0;display: block;width: 100%;float: left;text-align: center;background-size: 100% auto !important;position: relative;background:url() rgba(0,0,0,0) no-repeat center;\'></a>");
document.writeln("<a onclick=\'close_fage(this)\' style=\'position: absolute;top: 1px;right: 1px;color: red;\'>×关闭</a>");
document.writeln("</div>");
function close_fage(obj){
var introduction =document.getElementById('fage');
if(introduction.style.display == 'block'){
introduction.style.display = 'none';
}
}
}
</script>

效果图：浮动在顶部！