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

最新推荐文章于 2022-10-30 11:49:28 发布

pthill

最新推荐文章于 2022-10-30 11:49:28 发布

阅读量311

点赞数

文章标签： c# javascript ViewUI

本文介绍了一种使用jQuery插件实现单页滚动效果的方法。通过简单的HTML结构与jQuery结合，可以轻松创建平滑滚动的不同页面内容展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

 