网站顶部底部悬浮广告位代码

苏建报 代码分享 398 次浏览 , , 没有评论

网站顶部底部悬浮广告位代码分享。

顶部悬浮广告代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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.sujianbao.com/"><img src="http://www.sujianbao.com/example.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>

底部悬浮广告代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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://www.sujianbao.com/example1.gif';
	a[1] = 'http://www.sujianbao.com/example2.gif'
	var b = Math.floor(Math.random()*10+1);
	document.getElementById('img').src = a[b%2];
}
</script>
<a href="http://www.sujianbao.com/"><img id = 'img' width="100%" height="80"></a>
</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go