信鸽网

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

  作者：bea

本文实例讲述了JavaScript中添加随滚动条滚动窗体的方法。分享给大家供大家参考，具体如下： 两种实现方式： 第一种： <script type=/"text/javascript/">function scrollImg(){ var posX,posY; if (window.innerHeight) { posX = window.pageXOffset; posY = window.pageYOffset; } else if (document.

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: