Maison >interface Web >js tutoriel >Effet de défilement transparent de haut en bas implémenté par javascript

Effet de défilement transparent de haut en bas implémenté par javascript

高洛峰original: 2017-01-18 13:41:401317parcourir

L'exemple de cet article décrit l'effet de défilement transparent de haut en bas obtenu par javascript. Je le partage avec vous pour votre référence, les détails sont les suivants :

J'ai déjà introduit l'effet de défilement transparent gauche et droit JS, faisons maintenant l'effet de défilement transparent vers le haut et vers le bas. Les autres codes sont similaires à gauche et à droite, sauf que la valeur de offsetTop est modifiée et qu'il n'est pas nécessaire de calculer la largeur totale de ul.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>无缝滚动——上下</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  li{list-style:none;}
  img{border:0;}
  #scroll{width:178px;margin:50px auto;position:relative;}
  .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
  .up{background:url(images/up.gif);}
  .down{background:url(images/down.gif);}
  .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
  .content ul{position:absolute;top:0;left:0;}
  .content li{height:110px;}
  </style>
</head>
<body>
  <div id="scroll">
    <a href="javascript:;" id="up" class="btn up"></a>
    <div>
      <ul>
        <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
        <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
        <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
        <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
      </ul>
    </div>
    <a class="btn down" href="javascript:;" id="down"></a>
  </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById(&#39;scroll&#39;);
  var btnUp = document.getElementById(&#39;up&#39;);
  var btnDown = document.getElementById(&#39;down&#39;);
  var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
  var timer = null;
  var speed = -1;
  oUl.innerHTML += oUl.innerHTML;
  setTimeout(move,1500);
  btnUp.onclick = function(){
    clearInterval(timer);
    speed = -1;
    move();
  };
  btnDown.onclick = function(){
    clearInterval(timer);
    speed = 1;
    move();
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    move();
  };
  function move(){
    timer = setInterval(function(){
      oUl.style.top = oUl.offsetTop + speed + &#39;px&#39;;
      if(oUl.offsetTop <= - oUl.offsetHeight / 2){
        oUl.style.top = &#39;0&#39;;
      }else if(oUl.offsetTop >= 0){
        oUl.style.top = - oUl.offsetHeight / 2 + &#39;px&#39;;
      };
    },30);
  };
};
</script>

Si vous souhaitez modifier la vitesse de déplacement, modifiez simplement la valeur de la vitesse. La valeur par défaut initiale est de se déplacer vers le haut, c'est-à-dire que la vitesse est un nombre négatif.

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Pour plus d'articles liés à l'effet de défilement transparent vers le haut et vers le bas implémenté par javascript, veuillez faire attention au site Web PHP chinois !

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：Effet de défilement transparent gauche et droit implémenté par javascriptArticle suivant：Effet de défilement transparent gauche et droit implémenté par javascript

Articles Liés

Voir plus