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

vPageScroll.js 简单而强大的用于创建响应式单页滚动web布局的jQuery插件

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

简介


vPageScroll.js是一个简单而强大的jQuery插件,用于为单页滚动网站创建响应网格布局。该插件带有一个完全响应的侧面或顶部导航栏,允许访问者平滑地滚动浏览网页的不同部分。

(下载的附件中附有DEMO)


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


用于创建响应式单页滚动Web布局的jQuery插件vPageScroll.js



使用


1.  引入文件


<link href="src/css/jquery.vpagescroll.grid.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.styles.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.vpagescroll.js"></script>


2.  HTML


创建一个空容器来放置导航:


<div id="navigation"></div>


为单页滚动网站创建分区。使用data-*属性可以单独自定义每个部分:


<div class="main">

  <section data-title="Home" data-icon="fa-home" data-color="#1abc9c">
    <div class="container-12">
      <div class="inner">
        <div class="grid-6">Content 1.1</div>
        <div class="grid-6">Content 1.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 2" data-icon="fa-home" data-color="#2ecc71">
    <div class="container-12">
      <div class="inner">
        <div class="grid-2">Content 2.1</div>
        <div class="grid-10">Content 2.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 3" data-icon="fa-home" data-color="#3498db">
    <div class="container-12">
      <div class="inner">
        <div class="grid-3">Content 3.1</div>
        <div class="grid-9">Content 3.2</div>
      </div>
    </div>
  </section>

</div>


3.  调用


$(document).ready(function(){
  $(".main").vpagescroll({

    // the container
    sectionContainer: "section",   

    // the inner container
    sectionInner    : ".inner",

    // the navigation container
    navigation      : "#navigation"

  });
});



相关链接


作者官网 :   https://sayhello.ch/?ref=vir2al.chvpagescroll

易助科技网文档地址:  http://demo.easyzone.net.cn/plugin/vPageScroll/demo.html

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