recherche

Maison >interface Web >js tutoriel >jquery texte sur une seule ligne effet de défilement vers le haut example_jquery

jquery texte sur une seule ligne effet de défilement vers le haut example_jquery

WBOY
WBOYoriginal
2016-05-16 16:56:341172parcourir
Copier le code Le code est le suivant :


Regardez le texte à défilement intermittent


🎜>


  • L'exposition CCTV 315 : China Resources est profondément impliquée dans la réponse de la "Haisha Gate" est claire mais pas clair

  • Yoshinoya a été exposé pour ne pas avoir stérilisé la vaisselle, Bosideng et d'autres pulls en cachemire ne contenaient pas de cachemire

  • La police de Wuxi a annoncé l'incident d'"un incident inattendu malheur pour une policière enceinte"

  • Une journée en Chine : La dernière vision du ferry : "Fais-le" à la maison




;





Copier le code Le code est tel suit :
.infolist{width:400px;matgin :0;}
.infolist ul{margin:0;padding:0;}
.infolist ul li{list-style :aucun;hauteur:26px;hauteur de ligne:26px;}
.infocontent {width:400px;hauteur:26px;débordement:hidden;border:1px solid #666666;}



Copier le code Le code est le suivant :
var interval=1000;//L'intervalle de temps entre deux scrolls
var stepsize=26;//La longueur d'un défilement doit être une hauteur de ligne multiple, afin que les lignes ne se cassent pas lors du défilement
var objInterval=null

$(document).ready( function(){
//Remplissez la partie inférieure avec la partie supérieure
$ ("#bottom").html($("#top").html());

/ /Lier les événements de la souris à la zone affichée
$("#content").bind ("mouseover",function(){StopScroll();});
$("#content").bind(" mouseout",function(){StartScroll();});

//Démarrer le minuteur
StartScroll();
});

//Démarrer le minuteur et commencer le défilement
function StartScroll(){
objInterval=setInterval("verticalloop( )",interval);
}

//Effacer le minuteur et arrêter le défilement
function StopScroll( ){
window.clearInterval(objInterval);
}

//Control scrolling
function verticalloop(){
//Détermine si tout le contenu supérieur a été déplacé hors du zone d'affichage
//Si c'est le cas, recommencez à zéro ; sinon, continuez à avancer vers le haut
if($( "#content").scrollTop()>=$("#top").outerHeight() ){
$("#content").scrollTop($("#content").scrollTop()- $("#top").outerHeight()
}
//Utiliser jquery pour créer un effet d'animation lors du défilement
$("#content").animate(
{"scrollTop" : $("#content").scrollTop() stepsize "px"},600,function( ){
//Ceci est utilisé pour afficher le scrollTop de la zone de défilement. Dans les applications réelles, veuillez supprimer
// $( "#foot").html("scrollTop:" $("#content" ).scrollTop());
});
}

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
Article précédent：5 compétences de débogage essentielles pour les compétences JS debugging_javascriptArticle suivant：5 compétences de débogage essentielles pour les compétences JS debugging_javascript

Articles Liés

Voir plus