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

Scroll Page 平滑的响应迅速的 jQuery 全屏页面滑块插件

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

简介


Scroll Page是一个小型 jQuery 插件,它允许您通过鼠标滚轮或next/prev控件滚动网页的内容面板。非常适合响应迅速的全屏单页滚动网站。

(下载的附件中附有DEMO)


更多单页滚动插件:👉  [ 详情 ]


jQuery平滑全屏页面滑块插件Scroll Page



使用


1.  引入文件


<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="js/lib/jquery.scrollpage.js"></script>

<!-- 包括用于鼠标滚轮滚动支持的jQuery鼠标滚轮插件 -->
<script src="jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

<!-- 包含 jQuery easing 插件以提供宽松选项 -->
<script src="libs/jquery-easing/1.3/jquery.easing.min.js"></script>



2.  HTML


<div class="scroll_page">
  <div class="page first">
    <div class="content">
      <p>this is first page-1</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> </div>
  </div>
  <div class="page second">
    <div class="content">
      <p>this is second page--2</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page third">
    <div class="content">
      <p>this is third page---3</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page fourth">
    <div class="content">
      <p>this is fourth page----4</p>
    </div>
    <div class="control"> <a href="#" class="next">Next</a> <a href="#" class="prev">Prev</a> </div>
  </div>
  <div class="page fifth">
    <div class="content">
      <p>this is fifth page-----5</p>
    </div>
    <div class="control"> <a href="#" class="prev">Prev</a> </div>
  </div>
</div>

[CSS]
<style>
.title {
  height: 80px;
  width: 100%;
  position: fixed;
  z-index: 19861107;
  text-align: center;
  font-size: 20px;
  color: #333;
  line-height: 80px;
  text-shadow: 0 1px 2px 2px #FFF;
  background: #FEFEFE;
  box-shadow: 0 4px 2px 0 #666;
}

/*SCROLL PAGE MAIN CSS*/

.scroll_page {
  position: absolute;
  top: 0;
  z-index: 19861106;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll_page .page {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  color: #FFF;
  overflow: hidden;
}

.scroll_page .page .control {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 30px;
  left: 0;
  right: 0
}

.scroll_page .page .control a {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  border-radius: 25px;
  color: #999;
  background: #FFF;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.2;
}

.scroll_page .page .control a:hover { opacity: 1; }

.scroll_page .page .control a.prev {
  left: 20px;
  bottom: 0;
}

.scroll_page .page .control a.next {
  right: 20px;
  bottom: 0;
}

.scroll_page .page .content {
  margin: 120px auto;
  width: 300px;
  height: 80px;
  background: #EFEFEF;
  border: 1px solid #FEFEFE;
  box-shadow: 0 0 3px 1px #DDD;
  padding: 50px;
  text-transform: uppercase;
  color: #333;
  display: none;
}

.scroll_page .first { background: #26A8B8; }

.scroll_page .second { background: #0C616B; }

.scroll_page .third { background: #906894; }

.scroll_page .fourth { background: #8F8C2A; }

.scroll_page .fifth { background: #596B47; }
</style>



3.  调用


初始化插件以激活全屏页面滑块:


$(document).ready(function(){
  var scroll=$(".scroll_page");
  scroll.find(".content").eq(0).show();
  scroll.scrollpage({
    scroll_child: '.page', // child pages
    easing: '', // easing options
    next: ".next", // next control
    prev: ".prev", // prev control
    time: 1000, // animation speed
    complete: function(){ // callback
      var curr=$(".curr");
      curr.find(".content").stop(true,true).show(500,function(){
        curr.siblings().find(".content").stop(true,true).hide(800);
      });
    }
  });
});



相关链接


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

易助科技网效果演示地址2:   http://demo.easyzone.net.cn/plugin/ScrollPage/scroll-page.html