在网页左下角添加广告代码并始终漂浮并跟随滚动条
作者：admin 时间:2019-12-24 阅读数：73人
今天整理一下悬浮广告，这次整理的悬浮广告是一直在网页左下角并浮动，并跟随网页滚动，不管你怎么拖动滚动条，这都始终保持在那里，加入了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内的内容。
代码如下，你可以新建一个空白网页，把下面代码复制进去，之后查看效果。
<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内的内容。
声明
源码下载不顺利，比如源码在百度网盘的有时会被无故取消等，请联系QQ：46667551
本站大部分下载资源收集于网络，但除特别说明之外，基本全部亲自测试可用！
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
原文链接：https://www.dnwfb.com/370.html，转载请注明出处
