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