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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
用javascript实现读取txt文档的脚本
Jul 20 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现通讯录功能
2018/02/22 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
旅游活动总结
2014/08/27 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
安全保证书怎么写
2015/02/28 职场文书
入党团支部推荐意见
2015/06/02 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
git中cherry-pick命令的使用教程
2022/06/25 Servers