JQuery는 페이지 node_jquery로 슬라이딩하는 마우스 휠을 인식합니다.-JS 튜토리얼-php.cn

JQuery는 페이지 node_jquery로 슬라이딩하는 마우스 휠을 인식합니다.

WBOY

풀어 주다： 2016-05-16 15:48:36

원래의

1634명이 탐색했습니다.

다음은 JQuery 코드를 통해 마우스 휠이 페이지 노드로 슬라이드되고 디스플레이 렌더링을 통해 모든 사람에게 표시되는 방법을 자세히 소개합니다.

jQuery 마우스 휠을 기반으로 페이지의 노드 부분으로 슬라이드합니다. 이는 마우스 휠이나 제스처를 사용하여 페이지 노드의 일부로 슬라이드하는 jQuery CSS3 기반의 특수 효과입니다. 렌더링은 다음과 같습니다.

구현 코드.

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

로그인 후 복사

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

위 코드는 JQuery를 사용하여 페이지 노드로 슬라이딩되는 마우스 휠을 구현하는 전체 내용입니다. 향후 프로젝트 과정에서 모두에게 도움이 되기를 바랍니다.