Heim >Web-Frontend >js-Tutorial >JQuery realisiert, dass das Mausrad zur Seite node_jquery gleitet

JQuery realisiert, dass das Mausrad zur Seite node_jquery gleitet

WBOYOriginal: 2016-05-16 15:48:361613Durchsuche

Im Folgenden finden Sie eine detaillierte Einführung in die Art und Weise, wie das Mausrad durch einen Teil des JQuery-Codes zum Seitenknoten gleitet und allen durch ein Display-Rendering angezeigt wird.

Schieben Sie mit dem jQuery-Mausrad zum Knotenteil der Seite. Dies ist ein auf jQuery CSS3 basierender Spezialeffekt, der das Mausrad oder Gesten verwendet, um zu einem Teil des Seitenknotens zu gleiten. Das Rendering ist wie folgt:

Implementierungscode.

HTML-Code:

<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");

JS-Code:

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

Der obige Code ist der gesamte Inhalt der Verwendung von JQuery, um das Verschieben des Mausrads zum Seitenknoten zu realisieren. Ich hoffe, dass er für alle im zukünftigen Projektprozess 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：Das PageSwitch-Plug-in implementiert 100 verschiedene Bildwechseleffekte_jqueryNächster Artikel：Das PageSwitch-Plug-in implementiert 100 verschiedene Bildwechseleffekte_jquery

In Verbindung stehende Artikel

Mehr sehen