今天來模仿一下QQ瀏覽器for mac，具體效果請參考官網(wǎng)：browser.qq.com/mac/index.html
滾滾屏
滾滾屏網(wǎng)站是時下非常流行的個人站或者企業(yè)站的制作風(fēng)格酥艳，這個本身就是一種流行的趨勢，這個類型的網(wǎng)站大量運用css3中的動畫模塊技術(shù)，并且需要配合使用jquery。
特點：
每一屏都是鋪滿的 寬度和高度都是100%驯击；
沒有滾動條拢肆；
滾動效果需要第三方庫的支持减响；
每一屏的元素都是定位實現(xiàn)的；一般都是居中定位郭怪，這個很重要;
所有的入場動畫和出場動畫都是依靠CSS3實現(xiàn)的支示。
1.界面搭建
對應(yīng)的樣式：
通過設(shè)計overflow：hidden來隱藏其它屏幕和滾動條
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: 在水平方向滾動的增量，默認是 0
deltaY: 在垂直方向滾動的增量;? ? ? 增量正數(shù)向上滾動鄙才，增量負數(shù)向下滾動
deltaFactor: 滾動的幀率颂鸿，默認是100
3監(jiān)聽上下滾動
//1.監(jiān)聽window的滾動$(function () {?$(window).mousewheel(function (event) {//監(jiān)聽屏幕的上下滾動：1 是向上，-1是向下console.log(event.deltaY);})})
3.搭建固定頭部的界面
1.頭部左邊布局和樣式
執(zhí)行效果：
2.內(nèi)容居中
4.GPS導(dǎo)航
1.布局搭建
執(zhí)行效果：
2.圓點的實現(xiàn)
執(zhí)行的效果：
3.默認選中第一個：
5.搭建固定在底部的界面
1.布局的搭建
2.布局對應(yīng)的樣式
執(zhí)行的效果：
3.底部的樣式
執(zhí)行的效果：
4.滾動的指示器
1.指示器布局
2.指示器css3動畫
animation: myAnimate 1s infinite alternate linear
myAnimate 自定義動畫
1s? 動畫所花費的時間
infinite? 規(guī)定動畫應(yīng)該無限次播放
alternate? 動畫應(yīng)該輪流反向播放
linear? 動畫的曲線（勻速）
/*滾動的指示器*/
.scroll{
....
/*ccs3動畫*/
animation: unAndDowm 0.65s infinite alternate;
}
/*實現(xiàn)自定義動畫*/
@keyframes unAndDowm {
0%{transform:translateY(0px)}
100%{transform:translateY(10px)}
}
5.監(jiān)聽gps的點擊
切換gps選中的樣式
切換選項卡
6.背景漸變
1.css3漸變色介紹
linear-gradient
線性漸變的方向 默認從上到下
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction ：漸變開始的角度,默認是180deg
color-stop1 ： 漸變的過渡的顏色 （ 可以寫多個攒庵，還可以在其后添加百分比? ）
background 簡寫屬性在一個聲明中設(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.滾動的監(jiān)聽
8滾滾屏的節(jié)流
使用timeout進行節(jié)流 ,讓最后一次滾動有效;
在pc端節(jié)流一般控制在500毫秒。
9.臨界值處理
10滾動切換
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è)計聯(lián)調(diào)
第一步：
第二步：
選中項目中的css文件夾,? 點擊確認后會彈出一個是否允許的權(quán)限提示浓冒，點擊允許
第三步：
選中要關(guān)聯(lián)的文件
第四步：
按回車鍵即可
（未完待續(xù)栽渴！稍后補充github地址……）
