JavaScript添加随滚动条滚动窗体的方法

2019-11-20 10:31:57

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript中添加随滚动条滚动窗体的方法。分享给大家供大家参考，具体如下：

两种实现方式：

第一种：

<script type=/"text/javascript/">function scrollImg(){ var posX,posY; if (window.innerHeight) { posX = window.pageXOffset; posY = window.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { posX = document.documentElement.scrollLeft; posY = document.documentElement.scrollTop; } else if (document.body) { posX = document.body.scrollLeft; posY = document.body.scrollTop; } var ad=document.getElementById(/"ad/");ad.style.top=(posY+500)+/"px/";// ad.style.left=(posX+500)+/"px/";ad.style.left=/"90%/"; setTimeout(/"scrollImg()/",100);}</script><div id=/"ad/" style=/"position:absolute;background:#606060;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center; left: 103px; top: 911px;/">此广告位招租</div><script type=/"text/javascript/">scrollImg();</script>

第二种：

<html><head> <meta http-equiv=/"Content-Type/" content=/"text/html; charset=gb2312/"> <title>Drag and Drop example</title> <script language=/"javascript/">function picsize(obj,MaxWidth){img=new Image();img.src=obj.src;if (img.width>MaxWidth){ return MaxWidth;}else{ return img.width;}}function CloseQQ(){divStayTopleft.style.display=/"none/";return true; }var online= new Array(); </script></head><body> <div id=/"divStay/" style=/"position: absolute/"> <table cellspacing=/"0/" cellpadding=/"0/" width=/"100%/" border=/"0/">  <tbody>  <tr>   <td valign=/"top/" width=/"7%/">   </td>  </tr>  </tbody> </table> </div> <div id=/"divStayTopleft/" style=/"position: absolute/"> <table cellspacing=/"0/" cellpadding=/"0/" width=/"109/" border=/"0/">  <tr>  <td colspan=/"3/">   <a onclick=/"CloseQQ()/" href=/"javascript:;/" shape=/"circle/" coords=/"91,16,12/">   <img height=/"34/" src=/"images/qq_top.gif/" width=/"109/" usemap=/"#Map/"    border=/"0/"></a></td>  </tr>  <tr>  <td width=/"6/">   <img height=/"100/" src=/"images/qq_life.gif/" width=/"6/"></td>  <td valign=/"top/" width=/"96/" background=/"sto/qq_bg.gif/">   <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" align=/"center/" border=/"0/">   <tr>    <td height=/"30/">    <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" border=/"0/">     <tr>     <td>      <img height=/"13/" src=/"images/qq_ico1.gif/" width=/"16/"><span      class=/"font_12/"> <span style=/"font-size: 9pt/">客户服务</span></span></td>     </tr>    </table>    </td>   </tr>   <tr>    <td>    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table47/">     <tr>     <td width=/"15/" valign=/"top/" height=/"23/">      <img border=/"0/" src=/"images/qq_v01.gif/" width=/"16/" height=/"16/"></td>     <td valign=/"bottom/">      <script>document.write(/"<a target=blank href=tencent://message/?uin=178010108&Site=武林网&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:615050000:10 alt=[武林网]></a>/");</script>     </td>     </tr>    </table>    </td>   </tr>   <tr>    <td>    </td>   </tr>   <tr>    <td>    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table1/">     <tr>     <td width=/"15/" valign=/"top/" height=/"23/">      <img border=/"0/" src=/"images/qq_n01.gif/" width=/"16/" height=/"16/"></td>     <td valign=/"bottom/">      <script>document.write(/"<a target=blank href=tencent://message/?uin=251922268&Site=网页特效&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:43486831:10 alt=[QQQQQ]></a>/");</script>     </td>     </tr>    </table>    </td>   </tr>   <tr>    <td>    </td>   </tr>   </table>  </td>  <td width=/"7/">   <img height=/"100/" src=/"images/qq_right.gif/" width=/"7/"></td>  </tr>  <tr>  <td colspan=/"3/">   <img height=/"30/" src=/"images/qq_bottom1.gif/" width=/"109/"></td>  </tr>  <tr>  <td colspan=/"3/">   <img height=/"33/" src=/"images/qq_logo.gif/" width=/"109/"></td>  </tr> </table> </div> <script type=/"text/javascript/">function FloatTop(){var startX1 =document.body.offsetWidth-125 ,startY1 = 5;var startX2 =0,startY2 = 95;var ns = (navigator.appName.indexOf(/"Netscape/") != -1);var d = document;function ml(id,startX,startY){var el=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;return el;}window.stayTopLeft=function(){var pY = 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程序设计有所帮助。

下一篇：理解javascript定时器中的单线程