Maison > interface Web > js tutoriel > JavaScript permet d'obtenir des compétences de défilement fluide vers le haut et vers le bas_javascript

JavaScript permet d'obtenir des compétences de défilement fluide vers le haut et vers le bas_javascript

WBOY
Libérer: 2016-05-16 15:25:23
original
1453 Les gens l'ont consulté

L'exemple de cet article explique le code javascript pour obtenir un défilement transparent vers le haut et vers le bas, et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Le principe de js pour obtenir un défilement fluide de haut en bas est le suivant :
1. Définissez d’abord la hauteur ou la largeur du conteneur, puis overflow:hidden
2. Une fois la hauteur du conteneur définie, le contenu sera masqué s'il la dépasse.
3. Modifiez la valeur de l'attribut scrollTop (faire défiler vers le haut et vers le bas) du conteneur pour déplacer le contenu de haut en bas d'un nœud (le principe du défilement
) ; 4. Lorsque la hauteur de défilement scrollTop est supérieure ou égale à la hauteur du nœud à faire défiler, définissez scrollTop = 0, déplacez le premier dans l'arborescence des nœuds enfants jusqu'à la fin et redémarrez le défilement. L'effet de défilement en boucle ininterrompu se produira. apparaître.

Le rendu est le suivant :


Le code est le suivant :

<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 }else{
 colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

É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