今天來模仿一下QQ瀏覽器for mac，具體效果請(qǐng)參考官網(wǎng)：browser.qq.com/mac/index.html
滾滾屏
滾滾屏網(wǎng)站是時(shí)下非常流行的個(gè)人站或者企業(yè)站的制作風(fēng)格，這個(gè)本身就是一種流行的趨勢(shì)，這個(gè)類型的網(wǎng)站大量運(yùn)用css3中的動(dòng)畫模塊技術(shù)，并且需要配合使用jquery。
特點(diǎn)：
每一屏都是鋪滿的 寬度和高度都是100%；
沒有滾動(dòng)條；
滾動(dòng)效果需要第三方庫(kù)的支持；
每一屏的元素都是定位實(shí)現(xiàn)的；一般都是居中定位，這個(gè)很重要;
所有的入場(chǎng)動(dòng)畫和出場(chǎng)動(dòng)畫都是依靠CSS3實(shí)現(xiàn)的。
1.界面搭建
對(duì)應(yīng)的樣式：
通過設(shè)計(jì)overflow：hidden來隱藏其它屏幕和滾動(dòng)條
2滾滾屏插件MouseWheel
github:https://github.com/jquery/jquery-mousewheel
// using on
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// using the event helper
$('#my_elem').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
deltaX: 在水平方向滾動(dòng)的增量，默認(rèn)是 0
deltaY: 在垂直方向滾動(dòng)的增量;? ? ? 增量正數(shù)向上滾動(dòng)，增量負(fù)數(shù)向下滾動(dòng)
deltaFactor: 滾動(dòng)的幀率，默認(rèn)是100
3監(jiān)聽上下滾動(dòng)
//1.監(jiān)聽window的滾動(dòng)$(function () {?$(window).mousewheel(function (event) {//監(jiān)聽屏幕的上下滾動(dòng)：1 是向上，-1是向下console.log(event.deltaY);})})
3.搭建固定頭部的界面
1.頭部左邊布局和樣式
執(zhí)行效果：
2.內(nèi)容居中
4.GPS導(dǎo)航
1.布局搭建
執(zhí)行效果：
2.圓點(diǎn)的實(shí)現(xiàn)
執(zhí)行的效果：
3.默認(rèn)選中第一個(gè)：
5.搭建固定在底部的界面
1.布局的搭建
2.布局對(duì)應(yīng)的樣式
執(zhí)行的效果：
3.底部的樣式
執(zhí)行的效果：
4.滾動(dòng)的指示器
1.指示器布局
2.指示器css3動(dòng)畫
animation: myAnimate 1s infinite alternate linear
myAnimate 自定義動(dòng)畫
1s? 動(dòng)畫所花費(fèi)的時(shí)間
infinite? 規(guī)定動(dòng)畫應(yīng)該無限次播放
alternate? 動(dòng)畫應(yīng)該輪流反向播放
linear? 動(dòng)畫的曲線（勻速）
/*滾動(dòng)的指示器*/
.scroll{
....
/*ccs3動(dòng)畫*/
animation: unAndDowm 0.65s infinite alternate;
}
/*實(shí)現(xiàn)自定義動(dòng)畫*/
@keyframes unAndDowm {
0%{transform:translateY(0px)}
100%{transform:translateY(10px)}
}
5.監(jiān)聽gps的點(diǎn)擊
切換gps選中的樣式
切換選項(xiàng)卡
6.背景漸變
1.css3漸變色介紹
linear-gradient
線性漸變的方向 默認(rèn)從上到下
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction ：漸變開始的角度,默認(rèn)是180deg
color-stop1 ： 漸變的過渡的顏色 （ 可以寫多個(gè)，還可以在其后添加百分比? ）
background 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有的背景屬性。
可以設(shè)置如下屬性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
2.第一屏漸變色
background: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
添加光斑：
background: url(../images/page1_glow.png) no-repeat center -60px ,? ? ? ? ? ? linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
3.其它屏的背景
//page2
background: linear-gradient(0deg, #41b93e 0%, #3b9e3c 35%, #274535 75%, #190530 100%);
//page3
background: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
?//page4
background: url(../images/page4_glow.png) no-repeat center 200px, linear-gradient(0deg, #ff9f42 0%, #ed923d 35%, #6d3816 75%, #2e0b04 100%);
?//page5
background: url(../images/page5_glow.png) no-repeat center -300px,linear-gradient(0deg, #d74d53 0%, #c44655 35%, #4c184c 75%, #110145 100%);
7.滾動(dòng)的監(jiān)聽
8滾滾屏的節(jié)流
使用timeout進(jìn)行節(jié)流 ,讓最后一次滾動(dòng)有效;
在pc端節(jié)流一般控制在500毫秒。
9.臨界值處理
10滾動(dòng)切換
11顯示和隱藏其它的元素
12.首屏布局
1.首屏頭部
執(zhí)行效果：
2.中間布局
1.布局搭建
執(zhí)行效果：
2.布局中間的內(nèi)容
執(zhí)行的效果：
3.環(huán)繞布局
13.微調(diào)技巧
1.聲明當(dāng)前文件的編碼格式
/*聲明當(dāng)前文件的編碼格式*/
@charset "UTF-8";
2.設(shè)計(jì)聯(lián)調(diào)
第一步：
第二步：
選中項(xiàng)目中的css文件夾,? 點(diǎn)擊確認(rèn)后會(huì)彈出一個(gè)是否允許的權(quán)限提示，點(diǎn)擊允許
第三步：
選中要關(guān)聯(lián)的文件
第四步：
按回車鍵即可
（未完待續(xù)！稍后補(bǔ)充github地址……）
