Effet de défilement transparent de haut en bas implémenté par javascript-js tutoriel-php.cn

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

高洛峰

Libérer： 2017-01-18 13:41:40

original

1286 Les gens l'ont consulté

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>

Copier après la connexion

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 !