夏日博客

A-A+

jquery 使用鼠标滚轮或者手势滑动到页面节点部分例子

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

鼠标滚轮或者手势滑动功能通常一个是在电脑中使用，另一个是在手机中使用了，下面我们就来看一篇jquery 使用鼠标滚轮或者手势滑动到页面节点部分的教程.

有时我们需要做一个单页面介绍产品特性，而单页面内容非常多且页面非常长，为了快速定位到产品特性节点，我们使用js侦听用户滚轮事件，当用户触发滚轮滑动或者使用手势触屏滑动时，即可定位到相应的节点。一款jQuery插件叫Scrollify帮我们做到了。

如何使用:

Scrollify需要jQuery 1.6+以及缓冲动画easing插件配合来实现,HTML基本结构如下.

  1. <!DOCTYPE HTML>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf-8">   
  5. <title>scrollify</title>   
  6. <!--[if lt IE 9]>   
  7. <script src="html5shiv.min.js"></script>   
  8. <![endif]-->   
  9. <script src="jquery.js"></script>   
  10. <script src="jquery.easing.min.js"></script>   
  11. <script src="jquery.scrollify.min.js"></script>   
  12. <script>   
  13.     $(function() {   
  14.         $.scrollify({   
  15.             section : "section",   
  16.         });   
  17.     });   
  18. </script>   
  19. </head>   
  20. <body>   
  21.     <section></section>   
  22.     <section></section>   
  23. </body>   
  24. </html>   

基本配置:

以下是scrollify的默认选项配置.

  1. $.scrollify({   
  2.         section : "section",   
  3.         sectionName : "section-name",   
  4.         easing: "easeOutExpo",   
  5.         scrollSpeed: 1100,   
  6.         offset : 0,   
  7.         scrollbars: true,   
  8.         before:function() {},   
  9.         after:function() {}   
  10. });  

选项说明:

section:节点部分选择器.

sectionName:每一个section节点对应的data属性.

easing:定义缓冲动画.

offset:定义每个色彩tion节点的偏移量.

scrollbars:是否显示滚动条.

before:回调函数,滚动开始前触发.

after:回调函数,滚动完成后触发.

其他

Scrollify还提供了方法调用，如：

$.scrollify("move","#name");

以上代码可以直接滚动到#name的节点。

标签：

给我留言