Maison > interface Web > js tutoriel > le corps du texte

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
Libérer: 2016-05-16 16:43:04
original
1187 Les gens l'ont consulté

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

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

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>
Copier après la connexion

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

var divhight ; //这是所有数据行的高度,每行行高*数据量
var showtimes ; //显示完所有数据的时间,每行显示所需的时间*数据量
Copier après la connexion
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);
});
});
Copier après la connexion

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);
});
}
Copier après la connexion
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!