jQuery實(shí)現(xiàn)全屏幻燈片的滾動(dòng)頁面效果

9月 30, 2013

評(píng)論 (5)

Sponsor

近期蘋果推出了新的iPhone 5S手機(jī)，其官方頁面使用了類似全屏幻燈片那樣的展示方式，并通過垂直滾動(dòng)來實(shí)現(xiàn)切換，從而實(shí)現(xiàn)漂亮的視覺效果，一看就能吸引用戶。圖1為Apple iPhone 5s官方頁面的截圖。

今天設(shè)計(jì)達(dá)人發(fā)現(xiàn)了這個(gè)用jQuery來實(shí)現(xiàn)全屏幻燈片的滾動(dòng)頁面效果，大家先看看演示吧，點(diǎn)擊下面鏈接。

頁面大小是根據(jù)瀏覽器大小而變化，并可以通過鼠標(biāo)中鍵來滾動(dòng)頁面，視覺效果非常佳。

這個(gè)jQuery滑動(dòng)效果是使用CSS3的easing動(dòng)畫，所以我們?cè)诖a上可以用「ease」「ease-in」「ease-out」「linear」等效果。

使用方法

Step1: 加載外部文件

這里我們需要加載新版的jQuery庫和該插件及樣式文件(jquery.onepage-scroll.js、onepage-scroll.css)至網(wǎng)頁頭部。

...

Step2: HTML代碼

...

...

...

...

...

Step3: jQuery

大家可以根據(jù)提示自行修改屬性。

$(".main").onepage_scroll({

sectionContainer: "section", // 這個(gè)是可以改變的，比如你用DIV代替也可以。

easing: "ease", // 使用 CSS3 easing 動(dòng)畫，比如 "ease", "linear", "ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.175, 0.885, 0.420, 1.310)"等等。

animationTime: 1000, // 動(dòng)畫時(shí)間控制

pagination: true, // 這個(gè)用來控制焦點(diǎn)(導(dǎo)航)顯示， true為顯示， false為隱藏。

updateURL: false // URL地址切換。

});

推薦：查看最受歡迎的 301 個(gè)設(shè)計(jì)網(wǎng)站 → http://hao.shejidaren.com

交流：為設(shè)計(jì)新人提供的設(shè)計(jì)交流群，請(qǐng)加入U(xiǎn)I設(shè)計(jì)交流群，分享經(jīng)驗(yàn)、接單、求職、聊設(shè)計(jì)。

贊助商鏈接

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關(guān)注我們的微博，謝謝支持。

版權(quán)：除非注明，本站文章均為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系我們授權(quán)，否則禁止轉(zhuǎn)載。

徐冬冬 -

2016 年 07 月 13 日 下午 12:19

為什么IE9都不兼容

jhlmsx -

2014 年 07 月 29 日 上午 11:20

這個(gè)頁面加載慢如何解決？

木有咋果必要了吧 -

2014 年 05 月 24 日 下午 4:58

蘋果這個(gè)隨頁面載入模塊元素從左右進(jìn)入屏幕的效果是怎么實(shí)現(xiàn)的？

顓瀧 -

2014 年 04 月 02 日 上午 9:58

ie8和7都不兼容section改成div無法運(yùn)行郵箱longlong3815@163.com

Hi-SB -

2014 年 01 月 08 日 下午 2:32

不錯(cuò)不錯(cuò)！！給個(gè)贊

{ 發(fā)表評(píng)論 }

姓 名 (必填)

郵 件 (必填)

網(wǎng) 站

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。