jQuery implementiert einen Scroll-Effekt-js-Tutorial-php.cn

jQuery implementiert einen Scroll-Effekt

韦小宝

Freigeben： 2018-01-16 11:15:45

Original

1110 Leute haben es durchsucht

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>

Nach dem Login kopieren

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();
 });  
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!