插件描述：sonpScroll.js是一款可以制作帶視覺差效果的平滑單頁滾動特效的jQuery插件
sonpScroll.js是一款可以制作帶視覺差效果的平滑單頁滾動特效的jQuery插件。sonpScroll.js插件可以定制頁面分段的高度，可以制作視覺差特效。它的特點還有：
頁面平滑滾動。
定制分段section的高度。
帶分段圓點導航按鈕。
帶視覺差效果。
只需要一個JS文件。
在頁面中引入jquery和sonpScroll.js文件。
<script src="js/jquery.min.js"></script><script src="js/sonpScroll.js"></script>
該單頁滾動效果的基本HTML結構如下：
<body class="no-scroll"><div class="sonp-section sonp-middle"><p>Section middle size (50%)</p></div><div class="sonp-section sonp-full sonp-parallax"><p>Section full size (100%) with parallax effect</p></div><div class="sonp-section sonp-small"><p>Section small size (200px)</p></div></body>
通過在分段<div>元素或<section>元素上添加下面的class類來控制它們的行為。
no-scroll：在頁面中移除滾動條。
sonp-section：將元素定義為一個段落。
sonp-small：定義分段的尺寸為200像素高。
sonp-middle：定義分段的高度為頁面的50%。
sonp-full：定義分段的高度為頁面的100%。
sonp-parallax：定義分段使用視覺差效果。
可以通過兩個方法來控制分段的前后導航。例如：
<a onclick="$('.sonp-section').nextPage()">下一頁</a><a onclick="$('.sonp-section').prevPage()">前一頁</a>
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
