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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery.each使用详解
Jul 07 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
详解javascript中的Error对象
Apr 25 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
vue 虚拟DOM的原理
Oct 03 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求最大子序列和的算法实现
2011/06/24 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php处理带有中文URL的方法
2016/07/11 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js中的this关键字详解
2013/09/25 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python 同时运行多个程序的实例
2019/01/07 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
应聘教师自荐信
2013/10/12 职场文书
航空大学应届生求职信
2013/11/10 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
员工辞退通知书
2015/04/17 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Python实现批量自动整理文件
2022/03/16 Python
Python sklearn分类决策树方法详解
2022/09/23 Python