全屏单页滚动效果的jQuery插件Contentshow

简介

Contentshow只是为全屏单页滚动效果创建的一个jQuery插件，它可以帮助您创建基于步骤的web应用程序，如页面滑块和演示文稿。

（下载的附件中附有DEMO）

插件特定：

使用鼠标滚轮平滑地滚动页面部分。

侧面导航。

使用CSS3属性设置滚动子元素的动画。

使用简单。

使用

1.  引入文件

<link rel="stylesheet" href="contentshow.css">
  ...
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="contentshow.js"></script>

2.  HTML

<div class="contentshow">

  <div class="contentshow-sections-container history-sections">

    <!-- ## First section -->
    <section class="contentshow-section">

      <div class="contentshow-grouped-contents">

        <div class="contentshow-content contentshow-slide-up" data-cs-order="0">
          <h2 class="contentshow-subcontent">Lorem Ipsum</h2>
          <p class="contentshow-subcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>

        <div class="contentshow-content contentshow-slide-up" data-cs-order="1">
          <h2 class="contentshow-subcontent">Lorem Ipsum</h2>
          <p class="contentshow-subcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>

        <div class="contentshow-content contentshow-slide-up" data-cs-order="2">
          <h2 class="contentshow-subcontent">Lorem Ipsum</h2>
          <p class="contentshow-subcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>

      </div>

    </section>
    <!-- // First section -->

    <!-- ## Second section -->
    <section class="contentshow-section">

      <div class="contentshow-content contentshow-slide-up" data-cs-order="0">
        <h2 class="contentshow-subcontent">Lorem Ipsum</h2>
        <p class="contentshow-subcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>

    </section>
    <!-- // Second section -->

    <!-- ## Third section -->
    <section class="contentshow-section">

      <div class="contentshow-grouped-contents">

        <div class="contentshow-content contentshow-slide-up" data-cs-order="0">
          <h2 class="contentshow-subcontent">Lorem Ipsum</h2>
          <p class="contentshow-subcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>

      </div>

    </section>
    <!-- // Third section -->

  </div>

  <div class="contentshow-next-button-holder">
    <span class="contentshow-next-button">
      <span class="arrow-down"></span>
    </span>
  </div>


  <div class="contentshow-nav">

  </div>

</div>

3.  调用

用一个JS调用初始化演示文稿

$('.contentshow').contentshow();

使用回调进行初始化

$('.contentshow').contentshow({
  onSectionChange: function(e) {
    console.log('Current section data:', e.$section.data());
    console.log('Current section index:', e.sectionIndex);
    console.log('---');
  },
  onContentChange: function(e) {
    console.log('Current content data:', e.$content.data());
    console.log('Current content order:', e.contentOrder);
    console.log('Current content section index:', e.sectionIndex);
    console.log('---');
  }
});

4.  默认配置项

debounceDelay: 100,
startOffset: 100,
endOffset: 100,
useViewportUnit: false,
sectionIndex: 0,
contentAnimateClass: 'contentshow-animate',
onSectionChange: null,
onContentChange: null,

相关链接

效果演示 ：  https://www.jqueryscript.net/demo/Presentation-style-One-Page-Scroll-Plugin-For-jQuery-Contentshow/