Home > Article > Web Front-end > jquery single line text scroll up effect example_jquery

jquery single line text scroll up effect example_jquery

WBOYOriginal: 2016-05-16 16:56:341098browse

Copy code The code is as follows:

Look at the intermittent scrolling text

< ;div id="top" class="infolist"> 

CCTV 315 exposure: China Resources is deeply involved in the "Haisha Gate" and the response is clear but not clear

Yoshinoya was exposed for not sterilizing tableware, Bosideng and other cashmere sweaters did not contain cashmere

Wuxi police announced the incident of "an unexpected misfortune for a pregnant female police officer"

A day in China: The last ferry vision: "Get it done" at home

Copy code The code is as follows:

 
.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;} 

Copy code The code is as follows:

 
var interval=1000;//The time interval between two scrolls 
var stepsize=26;//The length of one scroll must be row height Multiples, so that lines will not break when scrolling 
var objInterval=null; 

$(document).ready( function(){ 
//Fill the lower part with the upper part
$ ("#bottom").html($("#top").html()); 

//Bind mouse events to the displayed area
$("#content").bind ("mouseover",function(){StopScroll();}); 
$("#content").bind("mouseout",function(){StartScroll();}); 

 //Start the timer
StartScroll(); 
}); 

//Start the timer and start scrolling
function StartScroll(){ 
objInterval=setInterval("verticalloop( )",interval); 
} 

//Clear the timer and stop scrolling
function StopScroll(){ 
window.clearInterval(objInterval); 
} 

//Control scrolling
function verticalloop(){ 
//Determine whether all the upper content has moved out of the display area
//If so, start from scratch; otherwise, continue to move upwards
if($( "#content").scrollTop()>=$("#top").outerHeight()){ 
$("#content").scrollTop($("#content").scrollTop()- $("#top").outerHeight()); 
} 
//Use jquery to create animation effects when scrolling
$("#content").animate( 
{"scrollTop" : $("#content").scrollTop() stepsize "px"},600,function(){ 
//This is used to display the scrollTop of the scroll area. In actual applications, please delete 
// $( "#foot").html("scrollTop:" $("#content").scrollTop()); 
}); 
} 

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：5 essential debugging skills for JS debugging_javascript skillsNext article：5 essential debugging skills for JS debugging_javascript skills

See more

jquery single line text scroll up effect example_jquery

Related articles