suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert den einfachen Scroll-Animationseffekt_jquery

jQuery implementiert den einfachen Scroll-Animationseffekt_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:06:211865Durchsuche

Die Idee der Animation ist sehr einfach. Klicken Sie auf ein Element auf der Seite und die Seite scrollt zur angegebenen Position. Hier ist eine Einführung in die Ergebnisse meiner dreistündigen Recherche zu Baidu:

Zuerst ist der HTML-Teil: 

<html>
<body>
<a>顶部</a>
<a>中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>

Fügen Sie zunächst zwei 3499910bf9dac5ae3c52d5ede7383485-Elemente als Schaltflächen hinzu. Fügen Sie dann das Element 3499910bf9dac5ae3c52d5ede7383485 hinzu: 

<html>
<body>
<a href="javascript:;" id="tab1">顶部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>

href="javascript:;" bedeutet wahrscheinlich, dass das a-Element js-Code aktivieren kann. Wenn er nicht hinzugefügt wird, ist der Code ungültig. Bei Verwendung von 51738bfe3c0543748d57de456193ed4a ist kein Hinzufügen erforderlich.
Führen Sie dann jquery ein und schreiben Sie Code: 

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function(){
    $("#tab1").click(function(){
      $("html,body").animate({scrollTop:'0px'},300);
    });
    $("#tab2").click(function(){
      $("html,body").animate({scrollTop:'600px'},300);
    });
  });
</script>

Hinweis:

1. Am besten schreiben Sie den Code unter die eingeführte JQuery-Anweisung

2. Die ID muss dem 3499910bf9dac5ae3c52d5ede7383485-Element entsprechen

3. „html,body“ steht für die Gesamtbewegung

4. ({scrollTop:'600px'},300) Der vorherige Wert ist die Bewegungsdistanz und der folgende Wert ist die Animationszeit (Einheit ist Millisekunden)

Nach diesem Schritt wird der Code ausgeführt.

Das Folgende ist eine detaillierte Analyse des JQuery-Codes: 

 $(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用


    $("#tab1").click(function(){
    //$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法


      $("html,body").animate({scrollTop:'0px'},300);
      //我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。


    });
    ...
  });
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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：Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)Nächster Artikel：Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)

In Verbindung stehende Artikel

Mehr sehen