前端開發——滾滾屏（沒有縱向滾動條）

阿新 • • 發佈：2019-01-14

1.前端流程：

1）需求分析

2）原型圖（低保真）——產品經理/設計師/策劃繪製

3）做效果圖

4）程式碼實現

2.優秀網站欣賞：

1）百度錢包一分錢專享： https://1.baidu.com/

2）微信T管家 http://www.weixint.com/

3）QQ PC版 http://im.qq.com/pcqq/

4）360瀏覽器歡迎頁面 http://se.360.cn/wel/welcome.html

3.若要用HTML5+CSS3做全屏（效果圖設計）

1）一般寬為1366px，如果是1920的解析度，則讓寬度自適應；高度一般做成768px或者700px

2)在PS或者Fireworks新建畫布（寬度1366px，高度700px，解析度72，顏色模式RGB，背景白色）——》最上面1366*60px的導航（一般高度給定60，具體看原型圖）——》在導航上擺放logo（如果暫時沒有logo，可以直接敲字型“Logo”或者其他能表明意思的內容）和字型——》選中項或者當前項給定一個背景色（繪製一個矩形）——》放入原型圖中的字型內容——》用矩形做Button按鈕（此時放入所有的內容到設計圖裡面）

3）找到Logo圖片，進行替換——》如果沒有透明背景的logo，則要做圖片處理——》導航字型處理為20px(具體視情況而定)——》字型為“微軟雅黑”

4）設定導航上面字型的間距：在前兩個之間敲入合適的空格——》雙擊選中空格——》複製空格到其他的導航字型之間

5）圖層分組——》頁面填充背景色——》新建圖層，做背景的漸變處理——》合併圖層，轉為智慧物件（在PS中右擊）——》濾鏡——》畫素化/晶格化（具體視情況而定）——》編輯濾鏡（智慧濾鏡可以編輯，普通圖層物件是沒法修改的）——》蒙版處理（使得濾鏡效果柔和）——》字型居中對齊

4.扁平化的好處：

1）效率高（適應不同的解析度）

2）便於修改

3）便於程式碼編寫

5.關於數字的處理：

10000.00這種寫法的視覺衝擊力要比1萬強很多。（當然，如果是商品打折的這種情況則反之，具體視不同的情況，會有不同的視覺效果）

6.網際網路設計分類：（圖片來自傳智）

7.滾滾屏的特點：

1）沒有縱向的滾動條

2）一般為全屏切換

3）通過滑鼠滾輪進行切換

4）每個螢幕都有切入和切出動畫（也可理解為淡入和淡出）

5）每個螢幕中都有可以互動的元素

8.滑鼠滾輪事件捕獲外掛：

在http://plugins.jquery.com/——》下載 jquery.mousewheel.min.js外掛

滑鼠滾動事件的寫法：

<script src="js/jquery-1.11.3.min.js" 
></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //頁面ready的時候執行
$(document).mousewheel(function(){ //當滾動滑鼠滾輪時要執行下面的內容
console.log("正在測試滑鼠滾動");
       });
   });
</script>

執行效果：（檢視控制檯console）

9.mousewheel方法的兩個引數：

 <script type="text/javascript">
$(document).ready(function(){ //頁面ready的時候執行
$(document).mousewheel(function(event,delta){ //當滾動滑鼠滾輪時要執行下面的內容
//               console.log("正在測試滑鼠滾動");
//               console.log(event);       //檢視event有哪些值
console.log(event.pageX,event.pageY);
               //滑鼠滾輪往下，輸出-1，往上滾，輸出1
console.log(delta);      //檢視delta的輸出
});
       });
    </script>

10.注意：滑鼠滾輪滾動的時候，往下是-1，往上是1

11.if語句死鎖問題：

<script type="text/javascript">
$(document).ready(function(){
        var nowPage=0;           //用nowPage來模擬當前頁面的序列號，合法值為0、1、2、3、4
        //滑鼠滾輪的事件捕獲
$(document).mousewheel(function(e,delta){
            if(nowPage>=0&&nowPage<4){
                //向下滾動，delta為-1；向上滾動，delta的值為1
nowPage=nowPage-delta;
            }else {
                console.log("超出了合法的頁面序號");
            }
            console.log(nowPage);
        });
    });
</script>

執行效果：

如何解決這個問題呢？

<script type="text/javascript">
$(document).ready(function(){
        var nowPage=0;
        $(document).mousewheel(function(e,delta){
            nowPage=nowPage-delta;
            if(nowPage<0){  //如果nowpPage小於0，就讓它=0
nowPage=0;
            }
            if(nowPage>4){     //如果nowPage大於4,就讓它=4
nowPage=4;
            }
            console.log(nowPage);
        });
    });
</script>

執行效果：

12.標準流中的盒子（塊級元素），如果不寫寬度，則寬度預設為父盒子的100%；如果脫離了標準流，則不再具備該特點。

脫離標準流的幾種方式：

1）position:absolute;

2)position:fixed;

3)float:left;

13.緩衝：

下載JQuery.easie.js外掛，http://jaukia.github.io/easie/

引用JQuery.easie.js，並且新增下圖選中內容：

14.函式節流

函式節流，簡單地講，就是讓一個函式無法在很短的時間間隔內連續呼叫，只有當上一次函式執行後過了你規定的時間間隔，才能進行下一次該函式的呼叫。

（參考部落格：http://www.cnblogs.com/webhelper/p/3711256.html）

函式節流的解決辦法就是：設定定時器

15.fireworks用來做切片比較方便

用fireworks開啟psd檔案的時候，選擇“維持Photoshop層外觀”——》開啟psd檔案——》複製圖層——》新建——》貼上——》匯出

16.色塊滾滾屏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滾滾屏的書寫</title>
    <style type="text/css">
/*清除樣式*/
* {
            margin: 0;
padding: 0;
}

        html, body {
            height: 100%; /*層層上推之後得到HTML高度要給定100%*/
            /*body的高度是HTML高度的百分比*/
overflow: hidden; /*隱藏其他的螢幕*/
}

        /*body{*/
        /*height: 100%;*/
        /*}*/
.container {
            width: 100%; /*加上這行程式碼，因為新增定位以後它脫標（脫離標準流）了，就沒有高度了*/
height: 100%; /*container的高度是來自body的*/
position: absolute; /*page的父盒子container要能移動，帶動page的移動，則要給container進行定位*/
top: 0;
/*top:-100%;         !*檢視第二個螢幕*!*/
left: 0;
}

        .page {
            width: 100%; /* 百分比參考的永遠是父盒子*/
height: 100%; /*page的高度為container的百分百，所以檢視container的高度*/
background-color: pink;
}

        .page1 {
            background-color: blue;
}

        .page2 {
            background-color: red;
}

        .page3 {
            background-color: yellow;
}

        .page4 {
            background-color: green;
}
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/jquery.easie.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
            var currentPage = 0;      //當前的頁面數
var lock = true;        //函式節流，給定的一個變數
$(document).mousewheel(function (e, delta) {
                if (lock) {
                    currentPage = currentPage - delta;
                    if (currentPage < 0) {
                        currentPage = 0;
                    }
                    if (currentPage > 4) {
                        currentPage = 4;
                    }
                    console.log(currentPage);
//                讓container進行動畫
$(".container").animate(
                            {
                                "top": currentPage * -100 + "%"   //通過負的100%的倍數來獲取到其他的螢幕內容
}
                            , 300         //時間
, "easieEaseOutCubic"          //新增easie.js類庫後新增該運動方式名稱
);
                    //函式節流
lock = false;
                    //設定一個定時器，當這個時間到了以後，Lock又恢復為true
setTimeout(function(){
                        lock=true;
                    },1000);
                }
            });
        });
    </script>
</head>
<body>
<div class="container">
<!--div.page.page$*5+Tab鍵輸出下面的內容-->
    <!--page類是一個公共類-->
<div class="page page0">0</div>
    <div class="page page1">1</div>
    <div class="page page2">2</div>
    <div class="page page3">3</div>
    <div class="page page4">4</div>
</div>
</body>
</html>

執行效果：（滾動到第二個頁面）

17.若要把上面的色塊替換成背景圖片，則：

.page {
    width: 100%; /* 百分比參考的永遠是父盒子*/
height: 100%; /*page的高度為container的百分百，所以檢視container的高度*/
background:url("images/page0_bg.jpg") no-repeat;
background-size: cover;     /*拉伸為盒子大小*/
}

執行效果：

（學習視訊來自傳智，感謝傳智老師的奉獻）

前端開發——滾滾屏（沒有縱向滾動條）

前端開發——滾滾屏（沒有縱向滾動條）

textarea如何實現高度自適應（不出現滾動條）

DataTables自定義表格寬度（設定橫向滾動條）

DataTables列過多時固定表格寬度（設定橫向滾動條）

web前端開發面試題（未完待續）

Web前端開發必備手冊（Cheat sheet）

微信小程式前端開發踩坑（一）

vue前端開發那些事（1）

主流瀏覽器核心介紹（前端開發值得了解的瀏覽器核心歷史）

人生第一次前端開發崗面試（本人的第一篇CSDN blog）

Web前端開發學習筆記（一）

（推介）github上前端開發面試題（上）

Web前端開發大系概覽（前端開發技術棧）

WEB前端開發最佳實踐（4）

FineUIMvc新特性速遞（大間距模式，隱藏菜單垂直滾動條）

Android開發之AudioManager（音頻管理器）具體解釋

用vue開發一個app（2，main.js）

2017年最權威的1000集大型web前端視頻教程（愛創課堂出品）文後附錄視頻下載鏈接

android mvp高速開發框架介紹（dileber的簡單介紹）

Windows10 使用Virtual Box一啟動虛擬機就藍屏（錯誤代碼SYSTEM_SERVICE_EXCEPTION）解決方案

前端開發——滾滾屏（沒有縱向滾動條）

相關推薦