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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
thinkphp配置文件路径的实现方法
2016/08/30 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
Js经典案例的实例代码
2018/05/10 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python初步实现word2vec操作
2020/06/09 Python
使用django自带的user做外键的方法
2020/11/30 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
自我反省检讨书
2014/01/23 职场文书
教师档案管理制度
2014/01/23 职场文书
行政人事岗位职责
2014/03/17 职场文书
学生安全责任书范本
2014/07/24 职场文书
2014年民政工作总结
2014/11/26 职场文书
入党个人总结范文
2015/03/02 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android