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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
JavaScript实现栈结构详细过程
Dec 06 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.ini中文版
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
物业管理大学生个人的自我评价
2013/10/10 职场文书
开会迟到检讨书
2014/02/03 职场文书
道德演讲稿
2014/05/21 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
工程合作意向书范本
2015/05/09 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
检讨书怎么写?
2019/06/21 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers