fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

onepage-scroll
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://www.thepetedesign.com/demos/onepage_scroll_demo.html
GitHub:https://github.com/peachananr/onepage-scroll
网站描述:jQuery单页/全屏滚动插件

单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jquery 插件,如之间介绍的 fullPage.js 和 Scrollify,今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。


onepage-scroll特点

onepage-scroll 还算小巧,min 版本仅 9kb,它有如下功能、特点:

  • (不)显示右侧圆点项目导航
  • (不)显示命名锚记
  • 循环/禁止循环
  • 回退(使用浏览器自带滚动)/指定回退
  • 支持键盘控制,左右上下/ Page Up / Page Donw / Home / End 等
  • 水平/横向滚动
  • 回调函数


onepage-scroll兼容 

onepage-scroll 使用了 css3 transform 属性,所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览。 


onepage-scroll使用

1、引入文件

<link rel="stylesheet" href="css/onepage-scroll.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>

2、html

<div>
    <section>第一屏</section>
    <section>第二屏</section>
    <section>第三屏</section>
    <section>第四屏</section>
</div>

3、JavaScript

$(function(){
    $('.main').onepage_scroll(); 
});


onepage-scroll配置

基本属性/方法

属性/方法类型默认值说明
sectionContainer字符串section绑定/制定元素,可以是标签或 class
easing字符串ease动画过度效果,可选 ease / linear / ease-in
animationTime整数1000动画过度时间,以毫秒为单位
pagination布尔值true显示右侧圆点项目导航
updateURL布尔值falseURL 显示命名锚记
beforeMove函数滚动前的回调函数
afterMove函数滚动后的回调函数
loop布尔值true循环滚动
keyboard布尔值true键盘控制,支持左右上下/ Page Up / Page Donw / Home / End
responsiveFallback布尔值/整数false回退,即使用浏览器自带滚动,默认我 false,既不使用浏览器自带滚动。也可以指定一个固定值,当页面的宽度小于这个值时,将自动回退
direction字符串vertical页面滚动方向,可选 vertical(垂直/竖向)和 horizontal(水平/横向)

公共方法

方法说明
moveUp()向上滚动
moveDown()向下滚动
moveTo(page_index)滚动到,如 $(‘.main’).moveTo(3);

链接: https://fly63.com/nav/1389

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览