基於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> &lt;! doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script&gt; $(function() { $.scrollify({ section : "section", }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;section&gt;&lt;/section&gt; &lt;section&gt;&lt;/section&gt; &lt;/body&gt; &lt;/html&gt; </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")); }); });