Heim > Artikel > Web-Frontend > jQuery implementiert einen Scroll-Effekt

jQuery implementiert einen Scroll-Effekt

韦小宝Original: 2018-01-16 11:15:451058Durchsuche

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um den Scroll-Effekt im Detail zu erzielen. Freunde, die sich für JQuery interessieren, können sich auf diesen Artikel beziehen.

Das Beispiel dieses Artikels ist Wir haben den spezifischen Code für jQuery zur Implementierung der Bildlaufeffektanzeige als Referenz freigegeben. Der spezifische Inhalt lautet wie folgt:

Das Prinzip ist wie folgt:

Angenommen, es gibt drei Bilder, die tatsächlich auf der Seite vorhanden sind, aber aufgrund der festgelegten Größe des sichtbaren Teils (die Breite wird hier hauptsächlich berücksichtigt). ) ist kleiner oder gleich der Größe eines Bildes. Wenn Sie andere Bilder sehen möchten, ist die direkteste Idee, das Bild, das angezeigt werden soll, im sichtbaren Bereich

zu platzieren, was bedeutet, dass was geändert werden muss, ist der Versatz des gesamten Bildbereichs (links/rechts)

Spezifische Implementierung:

js-Teil:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <p class="carousel">
 <p class="Con">
 <!-- 轮播(carousel)项目 -->
  <p class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </p>

  <!-- 轮播(carousel)指标 -->
  <p class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </p> 
 </p>

 <!-- 轮播(carousel)导航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </p>
</body>
</html>

2. Nach oben und unten scrollen

$(function() {
 var _index = 0;
 var time = 0;
 $(".But span").click(function() {
 _index = $(this).index();
 play(_index);
 });

 function play(index) {
 $(".But span").eq(index).addClass(&#39;active&#39;).siblings(&#39;span&#39;).removeClass(&#39;active&#39;);
 $(&#39;.scroll&#39;).animate({left: -(_index*1024)}, 500);
 }

 function autoPlay() {
 time = setInterval(function() {
 _index++;
 if(_index > 6) {
 $(&#39;.scroll&#39;).css("left", 0);
 _index = 0;
 }
 play(_index);
 }, 3000);
 }
 autoPlay();
 $(&#39;.prev&#39;).click(function() {
 if(_index <= 0) {
 return;
 }
 clearInterval(time);

 play(--_index);
 autoPlay();
 });
 $(&#39;.next&#39;).click(function() {
 if(_index >= 6) {
 return;
 }
 clearInterval(time);
 play(++_index);
 autoPlay();
 });  
});

Hier ist das Scrollen von Text als Beispiel: Mit Timer

wird nach einem bestimmten Zeitintervall das letzte li-Element in ul angezeigt kontinuierlich in das erste li-Element von ul eingefügt

Das ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein! !

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style type="text/css">
 .ul-list li {
 text-decoration: none;
 list-style: none;
 }
 </style>
</head>
<body>
 <ul class="ul-list">
 <li><a href="#">本地数据正反查询的实现例子</a></li>
 <li><a href="#">A-star寻路算法</a></li>
 <li><a href="#">node.js的querystring.stringify的使用</a></li>
 <li><a href="#">利用事件委托写一个简易扫雷游戏</a></li>
 <li><a href="#">懒加载（延迟加载）</a></li>
 <li><a href="#">JS中XML的解析</a></li>
 </ul>
 <script type="text/javascript">
 setInterval(function() {
 $(&#39;.ul-list li:last&#39;).css({&#39;height&#39;:&#39;0px&#39;, &#39;opacity&#39;:"0"}).insertBefore(".ul-list li:first").animate({&#39;height&#39;:&#39;25px&#39;, &#39;opacity&#39;: &#39;1&#39;}, &#39;slow&#39;, function() {
 $(this).removeAttr(&#39;style&#39;);
 })
 }, 3000);
 </script>
</body>
</html>

Verwandte Empfehlungen:

Beispiel für eine von JS implementierte Funktion zur Überprüfung der Passwortstärke basierend auf regulären Ausdrücken

Detaillierte Erläuterung von js-Objektinstanzen ( JavaScript-Objekttiefe (JS-Objekte gründlich analysieren und verstehen)

Detaillierte Erklärung der sechs Fehlertypen in JavaScript

Das obige ist der detaillierte Inhalt vonjQuery implementiert einen Scroll-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Gründe, anonyme JS-Funktionen nicht zu verwendenNächster Artikel：Gründe, anonyme JS-Funktionen nicht zu verwenden

In Verbindung stehende Artikel

Mehr sehen