js网页侧边随页面滚动广告效果实现
更新时间：2011年04月14日 22:07:32 作者：
其实这个效果不是什么难实现的效果，关键注意几个地方就可以了
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);
})();
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);
})();
相关文章
原型链是一种关系，实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的,下面这篇文章主要给大家介绍了关于Js继承与原型链的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了用js闭包的方法实现多点标注冒泡,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了Typescript3.9 常用新特性一览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了fetch跨域问题的使用详解,fetch 的核心主要包括：Request , Response , Header , Body，利用了请求的异步特性 --- 它是基于 promise 的，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了JavaScript中的LHS和RHS分析详情，LHS是赋值操作即可以看做是在往内存中存储值，而RHS是取值操作，它是从内存中进行检索，下文更多相关资料介绍需要的小伙伴可以参考一下2022-04-04
这篇文章主要为大家详细介绍了H5图片压缩与上传的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了js实现头像图片切割缩放及无刷新上传图片的方法,涉及javascript结合php实现文件无刷新上传等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
下面小编就为大家带来一篇js案例之鼠标跟随jquery版(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了BootStrap注意事项小结（五）表单的相关资料，非常不错，具有参考借鉴价值，,需要的朋友可以参考下2017-03-03
js中for...in循环对象时输出key值顺序混乱问题解决
很久之前就有前辈告诉我用for...in循环对象属性的顺序不是固定的,xiam 这篇文章主要给大家介绍了关于js中for...in循环对象时输出key值顺序混乱问题解决方法,需要的朋友可以参考下2023-11-11
最新评论