Heim  >  Artikel  >  Web-Frontend  >  jquery-Header, einzeilige Informationen, Scrollen, Anzeige, Implementierungsideen und code_jquery

jquery-Header, einzeilige Informationen, Scrollen, Anzeige, Implementierungsideen und code_jquery

WBOY
WBOYOriginal
2016-05-16 16:43:041188Durchsuche

Der folgende Stil dient zur Steuerung des Bildlaufs und fügt ihn in ein Div oder einen anderen Container ein.

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

Das Folgende ist ein Container für die scrollende Inhaltsanzeige

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

Das Folgende ist js zum Abfragen des Bildlaufanzeigeinhalts

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

Im Folgenden wird die Dauer und der Stil der Bildlaufanzeige gesteuert

/**
* 首页顶部滚动效果,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);
});
}
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn