jquery single line text scroll up effect example_jquery

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());
});
}