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

不錯不錯！！給個贊

{ 發表評論 }

姓 名 (必填)

郵 件 (必填)

網 站

總結

以上是生活随笔為你收集整理的html幻灯片滚动效果,jQuery实现全屏幻灯片的滚动页面效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。