建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:31收藏

简介


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

(下载的附件中附有DEMO)


更多 HTML 演示插件:👉  [ 详情 ]


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


插件特定:


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

侧面导航。

使用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,



相关链接


易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/contentshow/index.html