JavaScript实现带缓冲效果的随屏滚动漂浮广告代码


Posted in Javascript onNovember 06, 2015

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考,具体如下:

这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向。

运行效果截图如下:

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>随屏滚动</title>
<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>
<body>
<div class="box" id="box1" style="top:0;left:0;">AD1</div>
<div class="box" id="box2" style="top:0;right:0;">AD2</div>
</body>
<script type="text/javascript"> 
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
 var space=id(o).offsetTop;
 id(o).style.top=space+'px';
 void function(){
   var goTo = 0;
   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);}
   },50);
 }()
}
scroll('box1');
scroll('box2');
</script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
JS日期加减,日期运算代码
Nov 05 #Javascript
程序员必知35个jQuery 代码片段
Nov 05 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
js实现的常用的左侧导航效果
2013/10/17 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
微信网页登录逻辑与实现方法
2019/04/29 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
党员学习十八大感想
2014/01/17 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
工作违纪检讨书
2014/02/17 职场文书
微笑服务标语
2014/06/24 职场文书
就业意向书
2014/07/29 职场文书
委托书范本格式
2019/04/18 职场文书
编写python程序的90条建议
2021/04/14 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python