JQuery实现鼠标滚轮滑动到页面节点

前端技术 2023/09/05 JavaScript

下面通过一段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>
  <! doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : \"section\",
          });
        });
      </script>
    </head>
    <body>
      <section></section>
      <section></section>
    </body>
  </html>
        </pre>
    </div>
  </section>
  <section class=\"panel configuration\" data-section-name=\"configuration\">
    <div class=\"inner\">
      <h2>配置</h2>
      <pre>
  $.scrollify({
    section : \"section\",
    sectionName : \"section-name\",
    easing: \"easeOutExpo\",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: true,
    before:function() {},
    after:function() {}
  });
        </pre>
    </div>
  </section>
  <section class=\"panel options\" data-section-name=\"options\">
    <div class=\"inner\">
      <h2>选项设置</h2>
      <dl>
        <dt>section</dt>
        <dd>节点部分选择器.</dd>
        <dt>sectionName</dt>
        <dd>每一个section节点对应的data属性.</dd>
        <dt>easing</dt>
        <dd>定义缓冲动画.</dd>
        <dt>offset</dt>
        <dd>定义每个色彩tion节点的偏移量.</dd>
        <dt>scrollbars</dt>
        <dd>是否显示滚动条.</dd>
        <dt>before</dt>
        <dd>回调函数,滚动开始前触发.</dd>
        <dt>after</dt>
        <dd>回调函数,滚动完成后触发.</dd>
      </dl>
    </div>
  </section>
  <section class=\"panel methods\" data-section-name=\"methods\">
    <div class=\"inner\">
      <h2>方法</h2>
      <p>滑动到指定的节点。</p>
      <pre>
  $.scrollify(\"move\",\"#name\");
        </pre>
      <div style=\"text-algin:center;margin:10px auto\">
        <script src=\"/js/ad_js/bd_76090.js\" type=\"text/javascript\"></script>
      </div><br />
    </div>
  </section>

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

以上代码就是应用JQuery实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。

本文地址：https://www.stayed.cn/item/12869

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案