整个页面滚动显示不同的内容

整个页面滚动显示不同的内容

本例用到的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