A very useful text scrolling case, mouse suspension can be suspended [two options optional]_javascript techniques

Find a lot on the Internet, same, writing the core are the same, here I give you summed up, you can save spare.

Html:

<div class= "Scroll" >
 <ul class= "list" >
  <li><a href= "#" target= "_blank" > Announcement one or winning winner a </a></li>
  <li><a href= "#" target= "_blank" > Announcement II or winner B </a></li>
  <li ><a href= "#" target= "_blank" > bulletin three or winners C </a></li>
 </ul>
</div>

Resolution: Applicable to only one line of the announcement class, and show the winning list/lottery results, such as large box class, change the list height can be

Programme I:

function AutoScroll (obj) {
 $ (obj). Find (". List"). Animate ({
  margintop: " -25px"
 }, 1000, function () {
  $ (this). CSS ({margintop: "0px"}). Find ("Li:first"). Appendto (this);
 })
}
var timer = setinterval (' AutoScroll (". Scroll") ', 1000);
$ (function () {
 $ ('. Scroll '). Hover (function () {
  clearinterval (timer);
 }, Function () {
  timer = SetInterval (' AutoScroll (". Scroll") ', 1000);
 }
})

Programme II:

function AutoScroll (obj) {
 //var _t;
 function Scroll () {
  $ (obj). Find (". List"). Animate ({
   margintop: " -25px"
  }, a function () {
   $ (this). CSS ({margintop: "0px"}). Find ("Li:first"). Appendto (this);
  })
 }
 var timer = setinterval (scroll, 2800);
 $ (obj). Hover (
  function () {
   clearinterval (_t);
  },
  function () {
   timer = setinterval (scroll, 2800);
  }
 )
}
$ (function () {
 AutoScroll (". Scroll");
})

Parsing: The two schemes implement the same function, all by changing the value of Margin-top, the first to add to the last one to achieve. The first way to write directly the running steps, the timer can be defined on the outside of the load function, but also can be written in the inside, but the following content must be written in the load function inside, otherwise not normal execution.

If the whole is defined as a function, then the following function is called once in the load function to execute.

In the hover event, the callback function must be written timer=setinterval (), which means that the timer is assigned to the timer, the direct write setinterval does not work if the write Var timer=setinterval (); Then you redefine a timer, which also doesn't work.

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!