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 Function对象扩展之延时执行函数
Jul 06 Javascript
validator验证控件使用代码
Nov 23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
vue组件化中slot的基本使用方法
May 01 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
如何使用puppet替换文件中的string
2018/12/06 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
三年级评语大全
2014/04/23 职场文书
学校文明单位申报材料
2014/05/06 职场文书
低碳环保标语
2014/06/12 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
龙猫观后感
2015/06/09 职场文书
总结Python变量的相关知识
2021/06/28 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL