suchen

Heim  >  Artikel  >  Web-Frontend  >  Nahtloser Scroll-Effekt nach oben und unten, implementiert durch Javascript

Nahtloser Scroll-Effekt nach oben und unten, implementiert durch Javascript

高洛峰
高洛峰Original
2017-01-18 13:41:401290Durchsuche

Das Beispiel in diesem Artikel beschreibt den durch Javascript erzielten nahtlosen Auf- und Ab-Scrolleffekt. Ich teile es Ihnen als Referenz mit, die Details sind wie folgt:

Ich habe den JS-Effekt für nahtloses Scrollen nach links und rechts bereits eingeführt, jetzt machen wir den Effekt für nahtloses Scrollen nach oben und unten. Die anderen Codes ähneln links und rechts, außer dass der Wert von offsetTop geändert wird und die Gesamtbreite von ul nicht berechnet werden muss. 

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

Wenn Sie die Bewegungsgeschwindigkeit ändern möchten, ändern Sie einfach den Geschwindigkeitswert. Die anfängliche Standardeinstellung ist eine Aufwärtsbewegung, d. h. die Geschwindigkeit ist eine negative Zahl.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Weitere Artikel zum nahtlosen Auf- und Ab-Bildlaufeffekt, der durch Javascript implementiert wird, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nahtloser Scrolleffekt nach links und rechts, implementiert durch JavascriptNächster Artikel：Nahtloser Scrolleffekt nach links und rechts, implementiert durch Javascript

In Verbindung stehende Artikel

Mehr sehen