JQuery實現(xiàn)鼠標滾輪滑動到頁面節(jié)點
下面通過一段JQuery代碼實現(xiàn)鼠標滾輪滑動到頁面節(jié)點的詳細介紹,并通過展示效果圖展示給大家。
基于jQuery鼠標滾輪滑動到頁面節(jié)點部分。這是一款基于jQuery+CSS3實現(xiàn)的使用鼠標滾輪或者手勢滑動到頁面節(jié)點部分特效。效果圖如下:
實現(xiàn)的代碼。
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>選項設(shè)置</h2> <dl> <dt>section</dt> <dd>節(jié)點部分選擇器.</dd> <dt>sectionName</dt> <dd>每一個section節(jié)點對應(yīng)的data屬性.</dd> <dt>easing</dt> <dd>定義緩沖動畫.</dd> <dt>offset</dt> <dd>定義每個色彩tion節(jié)點的偏移量.</dd> <dt>scrollbars</dt> <dd>是否顯示滾動條.</dd> <dt>before</dt> <dd>回調(diào)函數(shù),滾動開始前觸發(fā).</dd> <dt>after</dt> <dd>回調(diào)函數(shù),滾動完成后觸發(fā).</dd> </dl> </div> </section> <section class="panel methods" data-section-name="methods"> <div class="inner"> <h2>方法</h2> <p>滑動到指定的節(jié)點。</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")); }); });
以上代碼就是應(yīng)用JQuery實現(xiàn)鼠標滾輪滑動到頁面節(jié)點的全部內(nèi)容,希望對大家在今后的項目過程中有所幫助。
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jquery實現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼
- jQuery實現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
- jQuery的Scrollify插件實現(xiàn)滑動到頁面下一節(jié)點
- JQuery 實現(xiàn)在同一頁面錨點鏈接之間的平滑滾動
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- 基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼(帶平滑移動的效果)
- jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果
相關(guān)文章
JQuery的html(data)方法與<script>腳本塊的解決方法
在使用Jquery的html(data)方法執(zhí)行寫數(shù)據(jù)到Dom元素時遇到一個問題:在data參數(shù)中包含script腳本塊的時候,html(data)方法的執(zhí)行結(jié)果與預(yù)期不符2010-03-03jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見,接下來的代碼簡單實用,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04jquery offset函數(shù)應(yīng)用實例
點擊一個按鈕,然后在按鈕的下方顯示一個div,當按鈕位于角落時,div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全.我打算使用offset()方法實現(xiàn)此功能2012-11-11jQuery插件DataTable使用方法詳解(.Net平臺)
這篇文章主要為大家詳細介紹了jQuery插件DataTable使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12基于jQuery實現(xiàn)復(fù)選框是否選中進行答題提示
近期有項目需求是這樣的,需要根據(jù)用戶選擇的選項給出相應(yīng)的提示,本文給大家介紹基于jQuery實現(xiàn)復(fù)選框是否選中進行答題提示,對jquery復(fù)選框是否選中相關(guān)知識感興趣的朋友一起看看吧2015-12-12