jquery-plugin-multiscroll.js

標籤：rstp   下載   image   text   http   query   png   var   頁面   

用法整理：

- ：https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

- 文檔地址：https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

實現的效果是頁面上下轉場效果

<ul id="myMenu"><li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li><li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li><li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li></ul><div id="multiscroll"><div class="ms-left"><div class="ms-section" name="firstPage">Some section</div><div class="ms-section" name="secondPage">Some section</div><div class="ms-section" name="thirdPage">Some section</div></div><div class="ms-right"><div class="ms-section" name="firstPage">Some section</div><div class="ms-section" name="secondPage">Some section</div><div class="ms-section" name="thirdPage">Some section</div></div></div>

　　

<script type="text/javascript">$(document).ready(function() {$(‘#multiscroll‘).multiscroll({sectionsColor: [‘#f2f2f2‘, ‘#4BBFC3‘, ‘#7BAABE‘, ‘whitesmoke‘, ‘#000‘],anchors: [‘firstPage‘, ‘secondPage‘,‘thirdPage‘],menu: ‘#myMenu‘});});</script>

　　注意！！！需要下列檔案

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css">    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">    <script src="jquery-3.2.1.min.js"></script>    <script type="text/javascript" src="jquery-ui.min.js"></script>    <script src="jquery.multiscroll.extensions.min.js"></script>

 

jquery-plugin-multiscroll.js