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 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 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
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
jquery text()要注意啦
2009/10/30 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
js实现蒙版效果
2020/01/11 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
利用python如何处理nc数据详解
2018/05/23 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
临床医学专业个人的自我评价
2013/09/27 职场文书
物流合作计划书
2014/01/10 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
兴趣小组活动总结
2014/05/05 职场文书
计划生育工作总结2015
2015/04/03 职场文书
小学数学教学随笔
2015/08/14 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL