Jerry318的gravatar头像
Jerry318 2014-11-20 16:59:49

jQuery实现全屏幻灯片的滚动页面特效源代码下载

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

jQuery实现全屏幻灯片的滚动页面特效源代码下载

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

在线演示:查看DEMO

插件下载页:https://github.com/peachananr/onepage-scroll

jQuery实现全屏幻灯片的滚动页面特效源代码下载

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

jQuery实现全屏幻灯片的滚动页面特效源代码下载

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

jQuery实现全屏幻灯片的滚动页面特效源代码下载

使用方法

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

最代码官方编辑于2014-11-20 22:22:24


打赏

最代码最近下载分享源代码列表最近下载
最代码最近浏览分享源代码列表最近浏览
suishuaike  LV8 5月9日
Wwz12345  LV8 2023年12月24日
9323249323  LV13 2023年7月25日
Kobey Chan 2023年6月27日
暂无贡献等级
promise76  LV1 2023年6月1日
zhangjinsb250  LV2 2023年2月5日
csc8366  LV13 2023年1月31日
a197304a 2023年1月8日
暂无贡献等级
fei3213  LV1 2022年5月10日
lvhongquan  LV11 2022年4月25日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友