移动手机端网站上下悬浮广告代码

这两段代码分别对应移动手机端网站的上下悬浮位置，我们知道做一个网站需要域名服务器等开支，当网站有了一定的流量我们多多少少会投放一些广告来维持网站的日常开支，这个时候如果有广告商来找到我们，要在网站投放悬浮广告，那么这两段代码就能用上了。

1、这是手机顶部的上悬浮代码 修改一下图片跟落地页网址就可以了

<style>

@media screen and (max-device-width:800px){ /**WAP**/

.bottom_fixed{ position:fixed; bottom:0px; width:100%; z-index:99999;}

.bottom_fixed div{ width:30px; height:30px; text-align:center; line-height:30px; background:#CCC; right:0; top:-30px; position:absolute; cursor:pointer;}

.bottom_fixed div:hover{ background:#F66; color:#FFF}

.bottom_fixed a img{ height:80px; width:100%;}

}

@media screen and (min-width:800px){ /**PC**/

.bottom_fixed{ display:none; position:fixed; bottom:0px; left:50%; margin-left:-475px; z-index:99999;}

.bottom_fixed div{ width:24px; height:24px; text-align:center; line-height:24px; background:#CCC; right:0; top:-24px; position:absolute; cursor:pointer}

.bottom_fixed div:hover{ background:#F66; color:#FFF}

.bottom_fixed a img{ height:75px; width:950px;}

}

</style>
<div class="bottom_fixed">
  <script>
//Math.floor(Math.random()*10+1);
window.onload = function(){
	var a = new Array();
	a[0] = 'http://wx1.sinaimg.cn/mw690/0060lm7Tly1fwnrr9i7e7g30hs02840e.gif';
	a[1] = 'http://wx4.sinaimg.cn/mw690/0060lm7Tly1fwnrr7p1ezg30qo01eaad.gif'
	var b = Math.floor(Math.random()*10+1);
	document.getElementById('img').src = a[b%2];
}
</script>
<a href="http://www.xiaojiangs.com"><img id = 'img' width="100%" height="80"></a>
    </div>

2、这是手机底部的下悬浮代码 修改方法同上

<style>
@media screen and (max-device-width:800px){ 
#float_banner{position:absolute;top:0;width:100%;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}
  }
  
  @media screen and (min-width:800px){
    #float_banner{display:none;position:absolute;top:0;width:100%;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}
     }
</style>
<div id="float_banner"><a href="http://www.xiaojiangs.com"><img src="http://img2.sfxl.com.cn/1/150008b.gif" width="100%" height="80"></a></div>

<script language="javascript">
    var speed = 100;
    var scrollTop = null;
    var hold = 0;
    var float_banner;
    var pos = null;
    var timer = null;
    var moveHeight = null;
    float_banner = document.getElementById("float_banner");
    window.onscroll=scroll_ad;
    function scroll_ad(){
        scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
        pos = scrollTop - float_banner.offsetTop;
        pos = pos/10
        moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
        if(moveHeight!=0){
            float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
            setTimeout(scroll_ad,speed);
        }
    }
</script>

好了，今天分享的移动手机上下悬浮代码就介绍到这里，希望这段对你有帮助。