html幻灯片滚动效果,jQuery实现全屏幻灯片的滚动页面效果

jQuery实现全屏幻灯片的滚动页面效果

9月 30, 2013

评论 (5)

Sponsor

近期苹果推出了新的iPhone 5S手机，其官方页面使用了类似全屏幻灯片那样的展示方式，并通过垂直滚动来实现切换，从而实现漂亮的视觉效果，一看就能吸引用户。图1为Apple iPhone 5s官方页面的截图。

今天设计达人发现了这个用jQuery来实现全屏幻灯片的滚动页面效果，大家先看看演示吧，点击下面链接。

页面大小是根据浏览器大小而变化，并可以通过鼠标中键来滚动页面，视觉效果非常佳。

这个jQuery滑动效果是使用CSS3的easing动画，所以我们在代码上可以用「ease」「ease-in」「ease-out」「linear」等效果。

使用方法

Step1: 加载外部文件

这里我们需要加载新版的jQuery库和该插件及样式文件(jquery.onepage-scroll.js、onepage-scroll.css)至网页头部。

...

Step2: HTML代码

...

...

...

...

...

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地址切换。

});

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

徐冬冬 -

2016 年 07 月 13 日 下午 12:19

为什么IE9都不兼容

jhlmsx -

2014 年 07 月 29 日 上午 11:20

这个页面加载慢如何解决？

木有咋果必要了吧 -

2014 年 05 月 24 日 下午 4:58

苹果这个随页面载入模块元素从左右进入屏幕的效果是怎么实现的？

颛泷 -

2014 年 04 月 02 日 上午 9:58

ie8和7都不兼容section改成div无法运行邮箱longlong3815@163.com

Hi-SB -

2014 年 01 月 08 日 下午 2:32

不错不错！！给个赞

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站