JS实现兼容性较好的随屏滚动效果

本文实例讲述了射流研究…实现兼容性较好的随屏滚动效果。分享给大家供大家参考，具体如下：

代码中的参数解释如下：

编号你要滚动的内容的国际日期变更线横坐标的位置不写为紧贴右边t你要放在页面的那个位置默认是贴着底边0是贴着顶边f 1表示固定不写或者0表示滚动。

本代码滚动时不会出现抖动，随着屏幕大小而变动

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-scroll-follow-src-style-codes/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=gbk' /title随屏滚动/titlestyle html，body { padd :0 margin :0 }/style/head body div id=' aa ' style=' width :200 px；高度：200 px背景： # c0c 0；'我在随屏滚/div div id=' bb ' style=' width :200 px；高度：200 px背景： # c0c 0；'我静止不动/div div style=' width :100%；高度：500 px背景： # 000 '/div div style='宽度：100%；高度：500 px背景：绿色'/div div style='宽度：100%；高度：500 px背景： red '/div/body/html脚本函数scroll(p){ var d=document，dd=d.documentElement，db=d.body，w=window，o=d.getElementById(p.id)，ie=/msie/I . test(navigator。用户代理)，styleif(o){ o . style。CSS文本='；位置：’(p . f！ie？固定' : '绝对')';(p.l==未定义？右：0: '左： ' p.l ' px)(p.t！=未定义？顶部： ' p . t ' px ' : '底部：0 ')；if(p . fie){ o . style。CSS文本='；左：表情(身体。scrolleft '(p . l==未定义？db。客户端宽度-o . offset width : p . l)(“px”)；top :表达式(正文。滚动顶部'(p . t==未定义？db。客户端高度-o . offset light : p . t)" " px ")；db。风格。CSS文本='；背景-图像：url(约：空白)；背景-附件：固定；}else{ if(！p . f){ w . on resize=w . on roll=function(){ var timer，timer 1；返回函数(){ if(timer)clear time out(timer)；timer=setTimeout(函数(){ timer 1=setInterval(函数(){ var ST=db。滚动顶部，c；c=st - o.offsetTop (p.t！=未定义？p . t :(w .内部高度| | db。客户高度)-偏置高度)；if(c！=0){ o . style。top=o .偏移数学。天花板(数学。ABS(c)/10)*(c0？-1:1)' px '；} else { ClearInterval(R1时间)；} },10) },100)//控制滚动的频率越大频率越慢} }() } } } }滚动({ id:'aa' })滚动({ id:'bb '，l:0，t:200，f :1 })/脚本希望本文所述对大家Java脚本语言程序设计有所帮助。