javascript之循環停頓上下滾動

2024-09-06 12:41:33

字體：大中小

來源：轉載

供稿：網友

extractNodes函數解決各瀏覽器的節點計算問題。FireFox把換行符也算成一個節點，很不合理啊。
先用appendChild復制前面的四個節點到底部，使得頭尾是一樣的內容，以作后用。記得做flash補間循環運動的時候就是這樣要頭尾一樣。
通過setInterval隔時運行rolltxt函數。
rolltxt函數首先計算的是間隔停頓的高度，滾動多高就要停頓一下，這個高度我也不知道怎么算出來的，跟CSS有關系，我是試出來的
用求余數的方法可以判斷是否已經滾過了所設的間隔高度。如果余數不等于0就繼續加1滾動。如果余數為0說明已經滾動了所設的間隔高度，要在這里停頓了。
設一個變量settime來計算時間，加到50的時候settime清零，滾動繼續，這個50我沒算過單位是什么，反正隨我高興。
差不到這樣已經能停頓滾動了，但是還有一個問題，沒有限定最高值，滾動一直滾啊滾啊，當然是會出毛病了。滾到哪再重頭開始滾好呢？當然是滾到尾部跟頭一樣位置的時候，網頁高度減去可見高度就對了，為什么這么算？這個自己比劃比劃就知道了。
循環停頓上下滾動已經大功告成了，不信你試試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>循環停頓上下滾動</title> <style type="text/css"> #block2{height:23px;width:500px;border:#ccc 1px solid;font-size:12px;text-align:center;} #block2 ul{list-style:outside none none;height:17px;padding:3px 0;overflow:hidden;margin:0;} #block2 ul li{float:left;display:inline;margin:2px 0;height:14px;width:24.9%;} #block2 ul li a{text-decoration:none;} </style> </head> <body>    <ul id="rolltxt">            </SPAN>
</div>
</div>
<div   id="uiiociw"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="s84oouy"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-06/1561288.html'>javascript模仿百萬格子小的一小段代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-06/1561290.html'>用javascript實現畫板的代碼</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="6e4euqm"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流