Jquery header single line information scroll display implementation ideas and code

  • 2020-03-30 03:29:12
  • OfStack

Here's how to control the scrolling, look up the scrolling, put it in a div or some other container, and I'm using < Dt>


<style>
#newCglist{width:300px;height:14px;line-height:14px;overflow:hidden}
#newCglist li{height:14px;padding-left:10px;}
</style>

Here is the container for the scrolling display


<dt class="positionrel" id="newCglist" ><div class="new positionabs"></div></dt>

Below is js, the query scroll display content


var divhight ; //This is the height of all rows, the height of each row * the amount of data
var showtimes ; // Time to display all data, time required per line * The amount of data 

function yejis(){
setInterval('AutoScroll("#newCglist")',500);
//The latest transaction case show
$.post("zrAction!newCgList.action",null,function(data){
divhight = data.length*14;
showtimes = data.length*3000;
$.each(data,function(i,datas){
$ul = $("<ul></ul>");
$tr = $("<li>"+datas[0]+"  Sign the bill successfully!  "+datas[1]+" yuan  "+datas[2]+" "+datas[3]+"</li>");
$ul.append($tr);
$("#newCglist").append($ul);
});
});

Here is how to control the scrolling display time, as well as the style


/**
*  Scroll at the top of the page, divhight  Is the row height of all the data 
* showtimes //The time it takes the loop to scroll through the data
* @param {Object} obj
* @memberOf {TypeName} 
*/
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:-divhight
},showtimes,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}

Related articles: