search

Home >Web Front-end >JS Tutorial >JQuery realizes the mouse wheel sliding to the page node_jquery

JQuery realizes the mouse wheel sliding to the page node_jquery

WBOY
WBOYOriginal
2016-05-16 15:48:361639browse

The following is a detailed introduction to how the mouse wheel slides to the page node through a piece of JQuery code, and is shown to everyone through a display rendering.

Slide to the node part of the page based on jQuery mouse wheel. This is a special effect based on jQuery CSS3 that uses the mouse wheel or gestures to slide to part of the page node. The rendering is as follows:

Implementation code.

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

The above code is the entire content of using JQuery to realize the mouse wheel sliding to the page node. I hope it will be helpful to everyone in the future project process.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PageSwitch plug-in implements 100 different image switching effects_jqueryNext article：PageSwitch plug-in implements 100 different image switching effects_jquery

Related articles

See more