ホームページ > 記事 > ウェブフロントエンド > JQuery はページへのマウスホイールのスライドを実現します。
JQuery はページへのマウスホイールのスライドを実現します。
- WBOYオリジナル
- 2016-05-16 15:48:361545ブラウズ
以下は、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 class="brush:php;toolbar:false">
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
配置
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
方法
滑动到指定的节点。
$.scrollify("move","#name");
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 を使用してページ ノードへのマウス ホイールのスライドを実現する内容全体です。今後のプロジェクト プロセスで皆さんに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。