当前位置:首页 > 建站教程 > 建站经验

在网页左下角添加广告代码并始终漂浮并跟随滚动条

懒鸟飞 发布于

      今天整理一下悬浮广告,这次整理的悬浮广告是一直在网页左下角并浮动,并跟随网页滚动,不管你怎么拖动滚动条,这都始终保持在那里,加入了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内的内容。

转载请注明原文地址:http://www.lazybirdfly.com/a/jzjy/86.html
留言与评论(共有 条评论)

   
验证码: