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


Posted in Javascript onJuly 28, 2015

下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家。

基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下:

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

实现的代码。

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实现鼠标滚轮滑动到页面节点的全部内容,希望对大家在今后的项目过程中有所帮助。

Javascript 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
CSS3实现动态背景登录框的代码
Jul 28 #Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 #Javascript
详解JavaScript ES6中的模板字符串
Jul 28 #Javascript
javascript解决IE6下hover问题的方法
Jul 28 #Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
详解JavaScript ES6中的Generator
Jul 28 #Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 #Javascript
You might like
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python3 中文文件读写方法
2018/01/23 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python Django基础二之URL路由系统
2019/07/18 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
测试工程师程序员求职信范文
2014/02/20 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2019银行竞聘书
2019/06/21 职场文书
2019财务转正述职报告
2019/06/27 职场文书