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

 更新时间:2015年07月28日 10:44:41   作者:拎壶充  
这篇文章主要介绍了使用JQuery实现鼠标滚轮滑动到页面节点的代码,需要的朋友可以参考下

下面通过一段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>
  &lt;! doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script&gt;
        $(function() {
          $.scrollify({
            section : "section",
          });
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;section&gt;&lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;
        </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实现鼠标滚轮滑动到页面节点的全部内容,希望对大家在今后的项目过程中有所帮助。

相关文章

  • 基于jquery的代码显示区域自动拉长效果

    基于jquery的代码显示区域自动拉长效果

    今天看到一个技术类网站,在显示代码的地方,边框会拉长,很方便用户阅读体验,特看了下代码,原理很简单,使用了jquery,不适用也可以实现
    2011-12-12
  • 基于jquery实现select选择框内容左右移动添加删除代码分享

    基于jquery实现select选择框内容左右移动添加删除代码分享

    这篇文章主要介绍了基于jquery实现select选择框内容左右移动添加删除功能,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery中元素选择器(element)简单用法示例

    jQuery中元素选择器(element)简单用法示例

    这篇文章主要介绍了jQuery中元素选择器(element)用法,简单通俗的说明了jQuery元素选择器的功能、用法并结合实例形式分析了jQuery元素选择器的相关使用技巧与注意事项,需要的朋友可以参考下
    2018-05-05
  • JQuery的Ajax跨域请求原理概述及实例

    JQuery的Ajax跨域请求原理概述及实例

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码
    2013-04-04
  • jQuery学习笔记之toArray()

    jQuery学习笔记之toArray()

    jquery.toArray()是将jQuery对象转换成数组,我们来分析下
    2014-06-06
  • jquery实现表格隔行换色效果

    jquery实现表格隔行换色效果

    下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
    2015-11-11
  • jquery 弹出层实现代码

    jquery 弹出层实现代码

    在项目中遇到一个问题,本来以为是使用dropdownlist的效果的,仔细一看,其实是在点击文本框以后,在其正下方弹出一个层,里边有多个选项进行选择。很像jQuery.datepicker 的效果。
    2009-10-10
  • 基于jQuery实现Tabs选项卡自定义插件

    基于jQuery实现Tabs选项卡自定义插件

    这篇文章主要为大家详细介绍了基于jQuery实现Tabs选项卡自定义插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jQuery实现移动端笔触canvas电子签名

    jQuery实现移动端笔触canvas电子签名

    这篇文章主要为大家详细介绍了jQuery实现移动端笔触canvas电子签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • jQuery实现密保互斥问题解决方案

    jQuery实现密保互斥问题解决方案

    密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥,具体实现如下,有此需求的朋友可以参考下
    2013-08-08

最新评论