Comment obtenir un effet de défilement de cycle intermittent de texte via JS-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-05 17:50:44

original

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