Maison >interface Web >js tutoriel >JQuery réalise le glissement de la molette de la souris vers la page node_jquery

JQuery réalise le glissement de la molette de la souris vers la page node_jquery

WBOYoriginal: 2016-05-16 15:48:361614parcourir

Ce qui suit est une introduction détaillée à la façon dont la molette de la souris glisse vers le nœud de page via un morceau de code JQuery et est montrée à tout le monde via un rendu d'affichage.

Glissez vers la partie nœud de la page en fonction de la molette de la souris jQuery. Il s'agit d'un effet spécial basé sur jQuery CSS3 qui utilise la molette de la souris ou des gestes pour glisser vers une partie du nœud de la page. Le rendu est le suivant :

Code d'implémentation.

Code HTML :

<section class="panel home" data-section-name="home">
    <div class="inner">
      <header>
        <h1></h1>
        <p class="tagline">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p>
      </header>
      <div style="text-algin:center;margin:10px auto">
      <script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br />
      <a href="#overview" class="scroll">滑动鼠标滚轮</a>

    </div>
  </section>
  <section class="panel overview" data-section-name="overview">
    <div class="inner">
      <h2>基本使用</h2>
      <p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p>
      <pre class="brush:php;toolbar:false">
  <! doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : "section",
          });
        });
      </script>
    </head>
    <body>
      <section></section>
      <section></section>
    </body>
  </html>

配置

  $.scrollify({
    section : "section",
    sectionName : "section-name",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: true,
    before:function() {},
    after:function() {}
  });

选项设置

section: 节点部分选择器.
sectionName: 每一个section节点对应的data属性.
easing: 定义缓冲动画.
offset: 定义每个色彩tion节点的偏移量.
scrollbars: 是否显示滚动条.
before: 回调函数,滚动开始前触发.
after: 回调函数,滚动完成后触发.

方法

滑动到指定的节点。

  $.scrollify("move","#name");

code js :

$(function () {
      $(".panel").css({ "height": $(window).height() });
      var timer;

      $(window).resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
          $(".panel").css({ "height": $(window).height() });
        }, 40);
      });

      $.scrollify({
        section: ".panel"
      });


      $(".scroll").click(function (e) {
        e.preventDefault();
        $.scrollify("move", $(this).attr("href"));
      });
    });

Le code ci-dessus représente tout le contenu de l'utilisation de JQuery pour réaliser le glissement de la molette de la souris vers le nœud de la page. J'espère qu'il sera utile à tout le monde dans le futur processus de projet.

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：Le plug-in PageSwitch implémente 100 effets de changement d'image différents_jqueryArticle suivant：Le plug-in PageSwitch implémente 100 effets de changement d'image différents_jquery

Articles Liés

Voir plus