今天整理一下悬浮广告，这次整理的悬浮广告是一直在网页左下角并浮动，并跟随网页滚动，不管你怎么拖动滚动条，这都始终保持在那里，加入了JavaScript运动缓冲的功能，当拖动滚动条的时候，它会慢慢的滚动出来。
代码如下，你可以新建一个空白网页，把下面代码复制进去，之后查看效果。
<html>
<head>
<title>始终漂浮在左下角的菜单 – Liehuo.Net</title>
<meta charset="gbk" />
<!–浮动广告样式–>
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
<!–浮动广告样式结束–>
</head>
<p style="height:1600px;"> </p>
<body>
<!–浮动广告–>
<div class="box" id="box1" style="bottom:0;left:0;">这里放置菜单</div>
<!–浮动广告结束–>
</body>
<!–浮动广告的滚动js效果–>
<script type="text/javascript">
var $id=function(id){
return (document.getElementById(id)) || id;
}
var locked=false;
var scroll=function (o){
var space=$id(o).offsetTop;
$id(o).style.top=space+'px';
var fixed = function(){
if(locked) return;
locked=true;
var roll=setInterval(function(){
var height =document.documentElement.scrollTop+document.body.scrollTop+space;
var top = parseInt($id(o).style.top);
if(height!= top){
goTo = height-parseInt((height – top)*0.9); $id(o).style.top=goTo+'px';
}
else{
if(roll) clearInterval(roll);
locked=false;
}
},50);
}
return fixed;
}
window.onscroll=scroll('box1');
</script>
</html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
<!–浮动广告的滚动js效果结束–>
从上面代码可以看出，制作一个这样的浮动广告，主要有三部分，
1、广告样式：<style>
2、广告的div：<div>
3、广告的js效果：<script>
所以我们可以根据自己的需要改变这个浮动广告，例如如果你想改变广告内容，就可以直接改div内的内容。
评论0