ホームページ > 記事 > ウェブフロントエンド > JQuery はページへのマウスホイールのスライドを実現します。
以下は、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 を使用してページ ノードへのマウス ホイールのスライドを実現する内容全体です。今後のプロジェクト プロセスで皆さんに役立つことを願っています。