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

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>

<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>

<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>