栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js网页侧边随页面滚动广告效果实现

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js网页侧边随页面滚动广告效果实现

a.scrollTop的计算;
b.滚动元素的定位值计算;
c.滚动周期设定;
代码如下:
css部分:
复制代码 代码如下:

body{ height:3000px;}
div,ul,li,body{margin:0; padding:0;}

#roll{width:50px; height:100px; background:#99CC00; position:absolute;}

Html代码:
复制代码 代码如下:




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);
})();
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/114303.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号