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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
jquery遍历json对象集合详解
May 18 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python的collections模块真的很好用
2021/03/01 Python
C语言笔试集
2012/07/24 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
学术会议欢迎词
2014/01/09 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
团员个人总结
2015/02/26 职场文书
2015公司年度工作总结
2015/05/14 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python