html地址栏 pageone,onepage-scroll单页面滚动切换插件

7a6cfbb723fcc80f334ebcd48d98f96e.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:onepage-scroll可以帮我们制作一个跨平台的通过全屏滚动来切换的响应式单页面网页。

要求

jQuery版本在 1.9.0以上

兼容性

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

用法

1、引入css和js文件

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

...

...

...

...

...

注意上面的 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"

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值