近期苹果推出了新的iPhone 5S手机，其官方页面使用了类似全屏幻灯片那样的展示方式，并通过垂直滚动来实现切换，从而实现漂亮的视觉效果，一看就能吸引用户。图1为Apple iPhone 5s官方页面的截图。
今天设计达人发现了这个用jQuery来实现全屏幻灯片的滚动页面效果，大家先看看演示吧，点击下面链接。
在线演示：查看DEMO
插件下载页：https://github.com/peachananr/onepage-scroll
页面大小是根据浏览器大小而变化，并可以通过鼠标中键来滚动页面，视觉效果非常佳。
这个jQuery滑动效果是使用CSS3的easing动画，所以我们在代码上可以用「ease」「ease-in」「ease-out」「linear」等效果。
使用方法
Step1: 加载外部文件
这里我们需要加载新版的jQuery库和该插件及样式文件（jquery.onepage-scroll.js、onepage-scroll.css）至网页头部。
<head>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
</head>Step2: HTML代码
<body>
...
<div class="main">
<section>...</section>
<section>...</section>
...
</div>
...
</body>Step3: jQuery
大家可以根据提示自行修改属性。
$(".main").onepage_scroll({
sectionContainer: "section", // 这个是可以改变的，比如你用DIV代替也可以。
easing: "ease", // 使用 CSS3 easing 动画，比如 "ease", "linear", "ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.175, 0.885, 0.420, 1.310)"等等。
animationTime: 1000, // 动画时间控制
pagination: true, // 这个用来控制焦点（导航）显示， true为显示， false为隐藏。
updateURL: false // URL地址切换。
});
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
