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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
JS实现复制功能
Mar 01 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
JavaScript获取时区实现过程解析
Sep 24 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 STRING 陷阱原理说明
2010/07/24 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP children()函数讲解
2019/02/03 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
javascript随机变色实例代码
2019/10/15 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
详解python中index()、find()方法
2019/08/29 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
财务会计专业推荐信
2013/11/30 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
介绍信的格式
2015/01/30 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书