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 面向对象编程
Oct 28 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue登录路由验证的实现
Dec 13 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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作的文本留言本的例子(五)
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
VUE前端cookie简单操作
2017/10/17 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python中pip的安装与使用教程
2018/08/10 Python
python求最大值最小值方法总结
2019/06/25 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
商务英语本科生的自我评价分享
2013/11/15 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
单位工作证明范文
2014/09/14 职场文书
法人身份证明书
2014/10/08 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
八月迷情观后感
2015/06/11 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书