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隔行变色与普通JS写法的对比
Apr 21 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP中的float类型使用说明
2010/07/27 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
javascript制作2048游戏
2015/03/30 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python程序退出方式小结
2017/12/09 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
pytorch构建多模型实例
2020/01/15 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
奥巴马演讲稿
2014/01/08 职场文书
美发店5.1活动方案
2014/01/24 职场文书
销售经理竞聘书
2014/03/31 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript