JavaScript添加随滚动条滚动窗体的方法
本文实例讲述了JavaScript中添加随滚动条滚动窗体的方法。分享给大家供大家参考，具体如下：
两种实现方式：
第一种：
<scripttype=/"text/javascript/">
functionscrollImg(){
varposX,posY;
if(window.innerHeight){
posX=window.pageXOffset;
posY=window.pageYOffset;
}
elseif(document.documentElement&&document.documentElement.scrollTop){
posX=document.documentElement.scrollLeft;
posY=document.documentElement.scrollTop;
}
elseif(document.body){
posX=document.body.scrollLeft;
posY=document.body.scrollTop;
}
varad=document.getElementById(/"ad/");
ad.style.top=(posY+500)+/"px/";
//ad.style.left=(posX+500)+/"px/";
ad.style.left=/"90%/";
setTimeout(/"scrollImg()/",100);
}
</script>
<divid=/"ad/"style=/"position:absolute;background:#606060;width:100px;height:100px;border:1pxdotted#000;line-height:100px;text-align:center;left:103px;top:911px;/">此广告位招租</div>
<scripttype=/"text/javascript/">
scrollImg();
</script>
第二种：
<html>
<head>
<metahttp-equiv=/"Content-Type/"content=/"text/html;charset=gb2312/">
<title>DragandDropexample</title>
<scriptlanguage=/"javascript/">
functionpicsize(obj,MaxWidth){
img=newImage();
img.src=obj.src;
if(img.width>MaxWidth)
{
returnMaxWidth;
}
else
{
returnimg.width;
}
}
functionCloseQQ()
{
divStayTopleft.style.display=/"none/";
returntrue;
}
varonline=newArray();
</script>
</head>
<body>
<divid=/"divStay/"style=/"position:absolute/">
<tablecellspacing=/"0/"cellpadding=/"0/"width=/"100%/"border=/"0/">
<tbody>
<tr>
<tdvalign=/"top/"width=/"7%/">
</td>
</tr>
</tbody>
</table>
</div>
<divid=/"divStayTopleft/"style=/"position:absolute/">
<tablecellspacing=/"0/"cellpadding=/"0/"width=/"109/"border=/"0/">
<tr>
<tdcolspan=/"3/">
<aonclick=/"CloseQQ()/"href=/"javascript:;/"shape=/"circle/"coords=/"91,16,12/">
<imgheight=/"34/"src=/"images/qq_top.gif/"width=/"109/"usemap=/"#Map/"
border=/"0/"></a></td>
</tr>
<tr>
<tdwidth=/"6/">
<imgheight=/"100/"src=/"images/qq_life.gif/"width=/"6/"></td>
<tdvalign=/"top/"width=/"96/"background=/"sto/qq_bg.gif/">
<tablecellspacing=/"0/"cellpadding=/"0/"width=/"90/"align=/"center/"border=/"0/">
<tr>
<tdheight=/"30/">
<tablecellspacing=/"0/"cellpadding=/"0/"width=/"90/"border=/"0/">
<tr>
<td>
<imgheight=/"13/"src=/"images/qq_ico1.gif/"width=/"16/"><span
class=/"font_12/"><spanstyle=/"font-size:9pt/">客户服务</span></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<tableborder=/"0/"width=/"100%/"cellpadding=/"2/"id=/"table47/">
<tr>
<tdwidth=/"15/"valign=/"top/"height=/"23/">
<imgborder=/"0/"src=/"images/qq_v01.gif/"width=/"16/"height=/"16/"></td>
<tdvalign=/"bottom/">
<script>document.write(/"<atarget=blankhref=tencent://message/?uin=178010108&Site=毛票票&Menu=yes><imgborder=0SRC=http://wpa.qq.com/pa?p=1:615050000:10alt=[毛票票]></a>/");</script>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<tableborder=/"0/"width=/"100%/"cellpadding=/"2/"id=/"table1/">
<tr>
<tdwidth=/"15/"valign=/"top/"height=/"23/">
<imgborder=/"0/"src=/"images/qq_n01.gif/"width=/"16/"height=/"16/"></td>
<tdvalign=/"bottom/">
<script>document.write(/"<atarget=blankhref=tencent://message/?uin=251922268&Site=网页特效&Menu=yes><imgborder=0SRC=http://wpa.qq.com/pa?p=1:43486831:10alt=[QQQQQ]></a>/");</script>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<tdwidth=/"7/">
<imgheight=/"100/"src=/"images/qq_right.gif/"width=/"7/"></td>
</tr>
<tr>
<tdcolspan=/"3/">
<imgheight=/"30/"src=/"images/qq_bottom1.gif/"width=/"109/"></td>
</tr>
<tr>
<tdcolspan=/"3/">
<imgheight=/"33/"src=/"images/qq_logo.gif/"width=/"109/"></td>
</tr>
</table>
</div>
<scripttype=/"text/javascript/">
functionFloatTop()
{
varstartX1=document.body.offsetWidth-125,startY1=5;
varstartX2=0,startY2=95;
varns=(navigator.appName.indexOf(/"Netscape/")!=-1);
vard=document;
functionml(id,startX,startY)
{
varel=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x=startX;
el.y=startY;
returnel;
}
window.stayTopLeft=function()
{
varpY=ns?pageYOffset:document.body.scrollTop;
ftlObj.y+=(pY+startY1-ftlObj.y)/8;
ftlObj1.y+=(pY+startY2-ftlObj1.y)/8;
ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-125,ftlObj.y);
ftlObj1.sP(ftlObj1.x,ftlObj1.y);
setTimeout(/"stayTopLeft()/",30);
}
//ftlObj=ml(/"divStay/",document.body.scrollLeft+document.body.offsetWidth-125,0);
//ftlObj1=ml(/"divStayTopLeft/",0,30);
ftlObj=ml(/"divStay/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,0);
ftlObj1=ml(/"divStayTopLeft/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,30);
stayTopLeft();
}
FloatTop();
</script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。