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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
关于js陀螺仪的理解分析
Apr 11 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JavaScript如何操作css
Oct 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
js 计算图片内点个数的示例代码
2019/04/04 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
js实现简单的秒表
2020/01/16 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python实现windows下文件备份脚本
2018/05/27 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
介绍一下write命令
2014/08/10 面试题
AJAX的全称是什么
2012/11/06 面试题
怎样写演讲稿
2014/01/04 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python