js网页侧边随页面滚动广告效果实现


Posted in Javascript onApril 14, 2011

a.scrollTop的计算;
b.滚动元素的定位值计算;
c.滚动周期设定;
代码如下:
css部分:

/*测试用的高度*/ 
body{ height:3000px;} 
div,ul,li,body{margin:0; padding:0;} 
/*position:absolute;用于元素的定位*/ 
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}

Html代码:
<body> 
<div id="roll"></div> 
</body>

JS代码:
var roll=document.getElementById('roll'), 
initX=0, 
initY, 
compY, 
sp=15, 
//可调整时间间隔,步进值不宜过大,不然IE下有点闪屏; 
timeGap=5, 
doc=document.documentElement, 
docBody=document.body; 
compY=initY=200; 
roll.style.right=initX+"px"; 
;(function(){ 
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0); 
//每次comP的值都不一样;直到roll.style.top===doc.scrollTop+initY; 
compY+=(curScrollTop+initY-compY)/sp; 
roll.style.top=Math.ceil(compY)+"px"; 
setTimeout(arguments.callee,timeGap); 
})();
Javascript 相关文章推荐
jquery 插件开发方法小结
Oct 23 Javascript
js Function类型
Dec 04 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
node.js从数据库获取数据
May 08 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
Preload基础使用方法详解
Feb 03 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 #Javascript
JQuery之拖拽插件实现代码
Apr 14 #Javascript
jQuery创建插件的代码分析
Apr 14 #Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 #Javascript
jquery中eq和get的区别与使用方法
Apr 14 #Javascript
基于jquery的blockui插件显示弹出层
Apr 14 #Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
详谈JavaScript内存泄漏
2014/11/14 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
2015年幼儿园毕业感言
2014/02/12 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
python中__slots__节约内存的具体做法
2021/07/04 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL