Home > Article > Web Front-end > javascript loop pause scroll up and down _javascript skills

javascript loop pause scroll up and down _javascript skills

WBOYOriginal: 2016-05-16 19:09:171462browse

The extractNodes function solves the node calculation problem of each browser. FireFox counts newlines as a node, which is very unreasonable.
First use appendChild to copy the first four nodes to the bottom so that the head and tail have the same content for later use. Remember that when doing flash tweening loop motion, the head and tail should be the same.
Run the rolltxt function at intervals through setInterval.
The rolltxt function first calculates the height of the pause interval. There will be a pause no matter how high the scroll is. I don’t know how to calculate this height. It has something to do with CSS. I just tried it out.
Used to find the remainder. The method can determine whether it has rolled past the set interval height. If the remainder is not equal to 0, continue to add 1 and roll. If the remainder is 0, it means that the set interval height has been scrolled and it needs to stop here.
Set a variable settime to calculate time. When it is added to 50, settime is cleared and the scrolling continues. I have not calculated the unit of this 50. Anyway, I am happy with it.
This is almost enough to stop the scrolling, but there is another problem. There is no limit to the maximum value. If the scrolling keeps rolling, of course something will go wrong. Where should I go and start again? Of course, when the tail is at the same position as the head, the height of the web page minus the visible height is correct. Why is it calculated like this? You will know this by yourself.
The loop pauses and scrolls up and down. You are done. If you don’t believe me, try it

<div id="block2">
  <ul id="rolltxt">
    <li>
<a href="http://www.jb51.net">Script House</a>1</li>
    <li>
<a href="http://www.jb51.net">Script House</a>2</li>
    <li>
<a href="http://www.jb51.net">Script House</a>3</li>
    <li>
<a href="http://www.jb51.net">Script House</a>4</li>
    <li>
<a href="http://www.jb51.net">Script House</a>5</li>
    <li>
<a href="http://www.jb51.net">Script House</a>6</li>
    <li>
<a href="http://www.jb51.net">Script House</a>7</li>
    <li>
<a href="http://www.jb51.net">Script House</a>8</li>
    <li>
<a href="http://www.jb51.net">Script House</a>9</li>
    <li>
<a href="http://www.jb51.net">Script Home</a>10</li>
    <li>
<a href="http://www.jb51.net">Script Home</a>11</li>
    <li>
<a href="http://www.jb51.net">Script Home</a>12</li>
    <li>
<a href="http://www.jb51.net">Script Home</a>13</li>
    <li>
<a href="http://www.jb51.net">Script Home</a>14</li>
    <li>
<a href="http://www.jb51.net">Script House</a>15</li>
    <li>
<a href="http://www.jb51.net">Script House</a>16</li>
  </ul>
</div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use javascript to implement drawing board code_javascript skillsNext article：Use javascript to implement drawing board code_javascript skills

See more

javascript loop pause scroll up and down _javascript skills

Related articles