Maison > Article > interface Web > Basé sur l'implémentation de jQuery pour revenir à l'exemple principal code_jquery

Basé sur l'implémentation de jQuery pour revenir à l'exemple principal code_jquery

WBOYoriginal: 2016-05-16 15:22:291258parcourir

Les rendus sont présentés ci-dessous :

Utilisation :

Référencez simplement la bibliothèque jQuery et le plug-in YesTop, puis revenez en haut avec une ligne de code :

Code devis :

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

Utiliser le code :

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

C'est à dire :

$.fn.yestop();

Ce code suffit.

Bien sûr, il existe des paramètres avancés, tels que changer les images, définir les icônes pour qu'elles soient circulaires, définir l'emplacement, définir l'heure, etc. Veuillez consulter d'autres démos pour plus de détails.
Complétez le code, enregistrez-le dans un fichier HTML pour découvrir l'effet :

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

Le contenu ci-dessus est destiné à partager avec vous l'exemple de code de retour au sommet basé sur jQuery. J'espère qu'il vous plaira.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation d'un exemple de code de couche contextuelle de clic basé sur jQuery_jqueryArticle suivant：Implémentation d'un exemple de code de couche contextuelle de clic basé sur jQuery_jquery

Articles Liés

Voir plus