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

Comment obtenir un effet de défilement de cycle intermittent de texte via JS

亚连
Libérer: 2018-06-05 17:50:44
original
2438 Les gens l'ont consulté

Cet article présente principalement l'effet de défilement cyclique intermittent du texte implémenté par JS, impliquant des techniques liées au javascript combinées au déclenchement de la fonction temporelle pour obtenir un fonctionnement dynamique des éléments de la page. Les amis dans le besoin peuvent s'y référer

Le. les exemples dans cet article décrivent l'effet de défilement de cycle intermittent du texte réalisé par JS. Je le partage avec vous pour votre référence. Les détails sont les suivants :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>www.jb51.net - 间歇循环滚动</title>
<style>
#box{
  height:240px;
  width:300px;
  margin:0 auto;
  border:1px solid #0066FF;
  overflow:hidden;
  padding-bottom:20px;
}
#box li{
  color:#333;
  height:24px;
}
#box ul{
  margin:0;
  padding:0;
}
</style>
</head>
<body>
<p id="box">
  <ul id="con1">
    <li>脚本之家1</li>
    <li>脚本之家2</li>
    <li>脚本之家3</li>
    <li>脚本之家4</li>
    <li>脚本之家5</li>
    <li>脚本之家6</li>
    <li>脚本之家7</li>
    <li>脚本之家8</li>
    <li>脚本之家9</li>
  </ul>
</p>
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
area.scrollTop=0;
var delay=2000;
var speed=50;
var time;
function starMove(){
  area.scrollTop++;
  time=setInterval("scrollUp()",speed);
}
function scrollUp(){
  if(area.scrollTop%liHeight==0){
  clearInterval(time);
  setTimeout("starMove()",delay);
  }else{
  area.scrollTop++;
  if(area.scrollTop>=area.offsetHeight/2){
  area.scrollTop=0;
  }
  }
}
setTimeout("starMove()",delay);
</script>
</body>
</html>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. vous sera utile à l'avenir.

Articles associés :

Explication détaillée des quatre méthodes de liaison d'événements dans React

Utiliser vuex pour réaliser le stockage et l'unification du statut de connexion La navigation n'est pas autorisée en statut connecté, quelles sont les méthodes spécifiques ?

Résoudre le problème selon lequel les navigateurs de version inférieure ne prennent pas en charge l'importation d'es6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

É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!