onepage-scroll单页面滚动切换插件

所属分类:UI-布局

 43186  350  查看评论 (5)
分享到微信朋友圈
X
onepage-scroll单页面滚动切换插件 ie兼容10

要求

jQuery版本在 1.9.0以上


兼容性

现代浏览器和移动平台上都能很好地支持,包括IE8和IE9表现得也很好。


用法


1、引入css和js文件

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>


2、加入如下格式的 html标签

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

注意上面的 section 标签,通过下面的js参数指定,即是我们的每一个页面的容器,


3、加入js代码

$(".main").onepage_scroll({
   sectionContainer: "section",     // 指定单页面的每个页面外部容器
   easing: "ease",                  // 页面切换的缓动效果,可设置成 "ease", "linear", "ease-in","ease-out", "ease-in-out"
   animationTime: 1000,             // 每个页面切换的时长
   pagination: true,                // 是否显示右边的导航圆形按钮
   updateURL: false,                // 切换页面的时候是否需要更新页面URL.
   beforeMove: function(index) {},  // 页面切换之前的回调,index表示页面的索引
   afterMove: function(index) {},   // 页面切换之后的回调,index表示页面的索引
   loop: false,                     // 当前页面为最后一个的时候,继续向下切换是否回到第一个页面
   keyboard: true,                  // 是否可以使用方向键来操纵页面切换
   responsiveFallback: false,        // 是否当浏览器宽度为某一个指定值的时候,去除该插件效果,如果想实现这种效果,那么可以指定一个宽度值
   direction: "vertical"            // 页面切换方向,可选值为 "vertical"水平 和"horizontal"垂直. 默认 "vertical"  
 });
相关插件-布局

仿某支付网模板

代码简单易用,注释清晰
  布局
 25951  334

layAdmin极简风格后台系统模板(原创)

一位后台工作者的零星之火,极简风格的后台系统layAdmin,欢迎体验!
  布局
 32889  361

MAC风格响应式后台管理模版

基于Bootstrap的HTML后台管理模板
  布局
 42305  426

jquery异步加载图片大图小图

jquery异步加载大图小图
  布局
 25293  337

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    kzfon 0
    2020/3/19 11:31:52
    谷歌浏览器78版本会报错:Unable to preventDefault inside passive event listener due to target being treated as passive 回复
    小希porridge 0
    2015/1/29 14:54:07
    ie8是不支持吧?
        爱我所爱做我想做想我所想0
        2017/9/13 16:11:32

        好像是支持的

    回复
    hacker 0
    2014/11/9 14:12:44
    fllpage 也不错,不过多个选择也好 回复
    もがき辉く 0
    2014/11/5 9:22:28
    为啥不直接用fllpage呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复