整个页面滚动显示不同的内容
本例用到的js和css请到演示页面查看
JavaScript Code
- <script>
- $(document).ready(function(){
- $(".main").onepage_scroll({
- sectionContainer:"section",
- responsiveFallback:600
- });
- });
- </script>
XML/HTML Code
- <divclass="wrapper">
- <divclass="main">
- <sectionclass="page1">
- <divclass="page_container">
- <h1>整个页面滚动显示不同的内容</h1>
- </div>
- <imgsrc="phones.png"alt="phones">
- </section>
- <sectionclass="page2">
- <divclass="page_container">
- <h1>Ready-to-useplugin</h1>
- <h2>AllyouneedisanHTMLmarkup,callthescriptandBAM!</h2>
- <codeclass="html">
- <divclass="main"><br>
- <section>...</section><br>
- <section>...</section><br>
- ...<br>
- </div>
- </code>
- <codeclass="js">
- $(".main").onepage_scroll();
- </code>
- </div>
- </section>
- <sectionclass="page3">
- <divclass="page_container">
- <h1>本站有各种jquery效果</h1>
- </div>
- </section>
- </div>
- </div>
原文地址: http://www.freejs.net/article_jquerytupiantexiao_131.html