Heim > Artikel > Web-Frontend > Basierend auf der jQuery-Implementierung, um zum oberen Beispiel code_jquery zurückzukehren

Basierend auf der jQuery-Implementierung, um zum oberen Beispiel code_jquery zurückzukehren

WBOYOriginal: 2016-05-16 15:22:291261Durchsuche

Die Renderings werden unten angezeigt:

Verwendung:

Referenzieren Sie einfach die jQuery-Bibliothek und das YesTop-Plug-in und kehren Sie dann mit einer Codezeile zum Anfang zurück:

Angebotscode:

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>

Verwenden Sie den Code:

<script type="text/javascript">
   $(document).ready(function () { $.fn.yestop(); })
</script>

Das heißt:

$.fn.yestop();

Dieser Code reicht aus.

Natürlich gibt es erweiterte Einstellungen, wie z. B. das Ändern von Bildern, das Festlegen kreisförmiger Symbole, das Festlegen des Standorts, das Festlegen der Zeit usw. Weitere Informationen finden Sie in anderen Demos.
Vervollständigen Sie den Code und speichern Sie ihn in einer HTML-Datei, um den Effekt zu erleben:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
  <title>YesTop - HoverTree</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>
  <style>
    body {
      margin: 0px;font-family:Arial
    }a{color:blue}
  </style>
</head>
<body>
  <div style="text-align:center;width:100%;margin:0px auto;">
    <h1>YesTop</h1>
    A jQuery Plugin<br />
    <a href="http://hovertree.com/texiao/yestop/">Demo 1</a> <a href="http://hovertree.com/texiao/yestop/demo2.htm">Demo 2</a> <a href="http://hovertree.com/texiao/yestop/demo3.htm">Demo 3</a>
    <a href="http://hovertree.com/texiao/yestop/demo4.htm">Demo 4</a> <a href="http://hovertree.com/h/bjaf/topimage.htm">Images</a>
  </div>
  <div style="height: 360px;background-color: #66FF66;">
    
  </div>
  <div style="width:100%;text-align:center;height:200px">&copy; hovertree.com</div>  
  <div style="height: 200px; visibility: visible; background-color: Olive">
  </div><div style="height:200px;background-color:burlywood"></div><div style="height:200px;background-color:darkorchid"></div>
  <div style="height: 200px; visibility: visible; background-color:gray">
  </div>
  <div style="height:200px;background-color:blue"></div>
  <div style="height:200px;background-color:red"></div>
  <div style="height:200px;background-color:yellow"></div>
  <div style="height:200px;background-color:yellowgreen"></div>
  <div style="height:800px;background-color:white"></div>
  <script type="text/javascript">
    $(document).ready(function () { $.fn.yestop(); })
  </script>
</body>
</html>

Der obige Inhalt dient dazu, Ihnen den Beispielcode für die Rückkehr nach oben basierend auf jQuery mitzuteilen. Ich hoffe, er gefällt Ihnen.

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：Implementierung eines Beispielcodes für die Klick-Popup-Ebene basierend auf jQuery_jqueryNächster Artikel：Implementierung eines Beispielcodes für die Klick-Popup-Ebene basierend auf jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen