jQuery的Scrollify外掛實作滑動到頁面下一節點_jquery
- WBOY原創
- 2016-05-16 15:51:311326瀏覽
有時我們需要做一個單頁介紹產品特性，而單頁內容非常多且頁面非常長，為了快速定位到產品特性節點，我們使用js偵聽用戶滾輪事件，當用戶觸發滾輪滑動或使用手勢觸控螢幕滑動時，即可定位到對應的節點。一款jQuery外掛叫Scrollify幫我們做到了。
Scrollify需要jQuery 1.6 以及緩衝動畫easing插件配合來實現。 HTML基本結構如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>scrollify</title>
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<script src="jquery.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.scrollify.min.js"></script>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
以下是scrollify的預設選項配置：
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
選項說明：
section：節點部分選擇器.
sectionName：每一個section節點對應的data屬性.
easing：定義緩衝動畫.
offset：定義每個色彩tion節點的偏移量.
scrollbars：是否顯示捲軸.
before：回呼函數,滾動開始前觸發.
after：回呼函數,滾動完成後觸發.
Scrollify也提供了方法調用，如：
$.scrollify("move","#name");
以上程式碼可以直接捲動到#name的節點。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn