JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)
下面通過一段JQuery代碼實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)的詳細(xì)介紹,并通過展示效果圖展示給大家。
基于jQuery鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)部分。這是一款基于jQuery+CSS3實(shí)現(xiàn)的使用鼠標(biāo)滾輪或者手勢(shì)滑動(dòng)到頁(yè)面節(jié)點(diǎn)部分特效。效果圖如下:

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

