下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。
基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下：
实现的代码。
html代码：
<section data-section-name="home"> <div> <header> <h1></h1> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p> </header> <div> <script src="https://www.jb51.net/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br /> <a href="#overview">滑动鼠标滚轮</a> </div> </section> <section data-section-name="overview"> <div> <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 data-section-name="configuration"> <div> <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 data-section-name="options"> <div> <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 data-section-name="methods"> <div> <h2>方法</h2> <p>滑动到指定的节点。</p> <pre> $.scrollify("move","#name"); </pre> <div> <script src="https://www.jb51.net/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实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。
您可能感兴趣的文章: