Maison  >  Article  >  interface Web  >  idées d'implémentation d'affichage de défilement d'informations sur une seule ligne d'en-tête jquery et code_jquery

idées d'implémentation d'affichage de défilement d'informations sur une seule ligne d'en-tête jquery et code_jquery

WBOY
WBOYoriginal
2016-05-16 16:43:041188parcourir

Ce qui suit est le style pour contrôler le défilement. Interrogez le contenu défilant et placez-le dans un div ou un autre conteneur. Ce que j'utilise ici est 73de882deff7a050a357292d0a1fca94

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

Ce qui suit est un conteneur pour l'affichage du contenu par défilement

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

Ce qui suit est js pour interroger le contenu de l'affichage défilant

var divhight ; //这是所有数据行的高度,每行行高*数据量
var showtimes ; //显示完所有数据的时间,每行显示所需的时间*数据量
function yejis(){
setInterval('AutoScroll("#newCglist")',500);
//最新成交案例展示
$.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]+" 签单成功! "+datas[1]+"元 "+datas[2]+" "+datas[3]+"</li>");
$ul.append($tr);
$("#newCglist").append($ul);
});
});

Ce qui suit consiste à contrôler la durée et le style de l'affichage de défilement

/**
* 首页顶部滚动效果,divhight 是所有数据的行高
* showtimes //循环滚动完这些数据所需的时间
* @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);
});
}
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn