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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 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
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python实现梯度下降法
2020/03/24 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
小学生竞选班干部演讲稿
2014/04/24 职场文书
调查研究项目计划书
2014/04/29 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
导游词欢迎词
2015/02/02 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书