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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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的一个登录的类 [推荐]
2007/03/16 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
Position属性之relative用法
2015/12/14 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python3实现多线程聊天室
2018/12/12 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
酒店员工职业生涯规划
2014/02/25 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
校运会通讯稿
2015/07/18 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers