【笔记】JQuery实现鼠标滚轮滑动到页面节点

103 阅读 0 评论 68 点赞

我是靠谱客的博主危机薯片，最近开发中收集的这篇文章主要介绍【笔记】JQuery实现鼠标滚轮滑动到页面节点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 1 <section class="panel home" data-section-name="home">
 2
<div class="inner">
 3
<header>
 4
<h1></h1>
 5
<p class="tagline">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p>
 6
</header>
 7
<div style="text-algin:center;margin:10px auto">
 8
<script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br />
 9
<a href="#overview" class="scroll">滑动鼠标滚轮</a>
10
11
</div>
12
</section>
13
<section class="panel overview" data-section-name="overview">
14
<div class="inner">
15
<h2>基本使用</h2>
16
<p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p>
17
<pre>
18
<! doctype html>
19
<html>
20
<head>
21
<script>
22 
$(function() {
23 
$.scrollify({
24 
section : "section",
25 
});
26 
});
27
</script>
28
</head>
29
<body>
30
<section></section>
31
<section></section>
32
</body>
33
</html>
34
</pre>
35
</div>
36
</section>
37
<section class="panel configuration" data-section-name="configuration">
38
<div class="inner">
39
<h2>配置</h2>
40
<pre>
41 
$.scrollify({
42 
section : "section",
43 
sectionName : "section-name",
44 
easing: "easeOutExpo",
45 
scrollSpeed: 1100,
46 
offset : 0,
47 
scrollbars: true,
48 
before:function() {},
49 
after:function() {}
50 
});
51
</pre>
52
</div>
53
</section>
54
<section class="panel options" data-section-name="options">
55
<div class="inner">
56
<h2>选项设置</h2>
57
<dl>
58
<dt>section</dt>
59
<dd>节点部分选择器.</dd>
60
<dt>sectionName</dt>
61
<dd>每一个section节点对应的data属性.</dd>
62
<dt>easing</dt>
63
<dd>定义缓冲动画.</dd>
64
<dt>offset</dt>
65
<dd>定义每个色彩tion节点的偏移量.</dd>
66
<dt>scrollbars</dt>
67
<dd>是否显示滚动条.</dd>
68
<dt>before</dt>
69
<dd>回调函数,滚动开始前触发.</dd>
70
<dt>after</dt>
71
<dd>回调函数,滚动完成后触发.</dd>
72
</dl>
73
</div>
74
</section>
75
<section class="panel methods" data-section-name="methods">
76
<div class="inner">
77
<h2>方法</h2>
78
<p>滑动到指定的节点。</p>
79
<pre>
80 
$.scrollify("move","#name");
81
</pre>
82
<div style="text-algin:center;margin:10px auto">
83
<script src="/js/ad_js/bd_76090.js" type="text/javascript"></script>
84
</div><br />
85
</div>
86
</section>

 1 $(function () {
 2
$(".panel").css({ "height": $(window).height() });
 3
var timer;
 4
 5
$(window).resize(function () {
 6 
clearTimeout(timer);
 7
timer = setTimeout(function () {
 8
$(".panel").css({ "height": $(window).height() });
 9
}, 40);
10 
});
11
12 
$.scrollify({
13
section: ".panel"
14 
});
15
16
17
$(".scroll").click(function (e) {
18 
e.preventDefault();
19
$.scrollify("move", $(this).attr("href"));
20 
});
21
});