JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
更新时间：2015年11月06日 10:53:13 作者：企鹅
这篇文章主要介绍了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码,通过JavaScript结合时间函数动态响应页面元素滚动事件实现悬浮广告的缓冲漂浮效果,非常简单实用,需要的朋友可以参考下
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考，具体如下：
这里演示了始终随屏滚动的JavaScript代码，在国内的应用泛滥成灾了，特别是一些喜欢漂浮广告的站长，常把本代码用作了漂浮广告，其实这种效果的初衷是编写一个随屏滚动的菜单，让游客随时随地可以控制网站的导向。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/
具体代码如下：
<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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js实现轮播图效果，图片自动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
随着多核cpu的普级,并发/并行多线程运算在主流的编程语言越来越流行,而在目前Javascript实现中还看不到在语言方面支持多线程,现在Javascript如此流行,真希望今后会在语言的层面有很大的变化.2010-11-11
webpack+vue-cil中proxyTable处理跨域的方法
这篇文章主要介绍了webpack+vue-cil中proxyTable处理跨域的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了如何使用JS console.log()技巧提高工作效率,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
javascript eval应用小例子。实例代码就是控制checkbox的选择与取消的函数，非常不错。2009-07-07
当定义和调用函数时，JavaScript 函数对象会自动具有一些特定的属性，本文为大家总结了一些常见的属性和方法，感兴趣的小伙伴可以了解一下2023-05-05
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，本篇文章主要介绍了Babel 入门教程学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
下面小编就为大家带来一篇浅谈JavaScript for循环 闭包。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JavaScript中new操作符的解析和实现，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了JavaScript实现自动对页面上敏感词进行屏蔽的方法,涉及javascript针对页面字符串查找及替换的相关技巧,需要的朋友可以参考下2015-07-07
最新评论