html幻灯片滚动效果,jQuery实现全屏幻灯片的滚动页面效果
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux常用内建命令笔记
- 下一篇: 常见的数据增强项目和论文介绍