您的位置：首页 > Web前端 > JQuery

JQuery实现鼠标滚轮滑动到页面节点

2015-07-28 10:44 761 查看

下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。

基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下：

实现的代码。

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实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 鼠标滚轮

相关文章推荐

新的分享

章节导航