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 相关文章推荐
JS函数重载的解决方案
May 13 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue 解决computed修改data数据的问题
Nov 06 Javascript
vue实现购物车结算功能
Jun 18 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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
东方红 - 来复式再生机的修复
2021/03/02 无线电
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP 日常开发小技巧
2009/09/23 PHP
php实现httpRequest的方法
2015/03/13 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python构建自定义回调函数详解
2017/06/20 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
完美主义个人的自我评价
2014/02/17 职场文书
毕业生就业协议书
2014/04/11 职场文书
开工典礼策划方案
2014/05/23 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书