网站顶部底部(上下)悬浮(漂浮)广告位代码

分类:技术 2018年11月22日 20:36:53 12914次浏览 

自己找了很久  分享出来,希望可以帮到大家

底部悬浮广告代码

<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.jc0006.com"><img id = 'img' width="100%" height="80"></a>
    </div>

顶部悬浮广告代码

<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://w8.zklp.com.cn/?c=ww150008"><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>


文章评论

  •   访客
    发布于 2019-01-06 15:35:44 回复
  • 博主,底漂代码 如果要加入2个以上的图片轮播,怎么弄,另外 这个底漂代码 在UC浏览器上面不显示能解决吗

发表评论