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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
动态加载js、css的实例代码
May 26 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
php zend解密软件绿色版测试可用
2008/04/14 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php中opendir函数用法实例
2014/11/15 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
javascript date格式化示例
2013/09/25 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
办公室文员岗位职责范本
2014/06/12 职场文书
优秀党员个人总结
2015/02/14 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
小学运动会报道稿
2015/07/22 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python