Implementation of jquery single-line text scroll up effect code _ javascript tips-js tutorial

This article mainly introduces the specific implementation of jquery single-line text Scrolling up. This effect is applicable to many scenarios and will not be learned.

  
See the intermittent scrolling text
 
 
 
 
 
 
  
  
CCTV 315 exposure: China Resources is deeply immersed in the "Sea Sand Gate" and the response is clear and outstanding
 
  
  
Yoy's home was revealed that tableware was not disinfected and bosideng and other cashmere sweaters did not contain cashmere
 
  
  
Wuxi Police announced the incident of "waiting for female policemen to be unfortunate"
 
  
  
Chinese day: the final ferry view: "done" at home"
 
 
 
 
 
 
 
 

.infolist{width:400px;matgin:0;} .infolist ul{margin:0;padding:0;} .infolist ul li{list-style:none;height:26px;line-height:26px;} .infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

Var interval = 1000; // interval between two scrolling times var stepsize = 26; // the length of one scrolling time, which must be a multiple of the row height, in this way, the line var objInterval = null; $ (document) will not be broken during scrolling ). ready (function () {// fill the lower part with the upper content $ ("# bottom" ).html ($ ("# top" ).html ()); // bind a mouse event to the displayed area $ ("# content "). bind ("mouseover", function () {StopScroll () ;}); $ ("# content "). bind ("mouseout", function () {StartScroll () ;}); // start the timer and start the rolling function StartScroll () {objInterval = setInterval ("verticalloop ()", interval);} // clear the timer and stop the rolling function StopScroll () {window. clearInterval (objInterval);} // controls the scroll function verticalloop () {// determines whether the upper part of the content is removed from the display area. // If yes, it starts from the beginning. Otherwise, move if ($ ("# content") up "). scrollTop () >=$ ("# top "). outerHeight () {$ ("# content "). scrollTop ($ ("# content "). scrollTop ()-$ ("# top "). outerHeight ();} // use jquery to create the animation effect when scrolling $ ("# content "). animate ({"scrollTop": $ ("# content "). scrollTop () + stepsize + "px"}, 600, function () {// This is used to display the scrollTop of the scrolling area, delete // $ ("# foot" ).html ("scrollTop:" + $ ("# content") in actual applications "). scrollTop ());});}