国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端每日實戰：162# 視頻演示如何用原生 JS 創作一個查詢 github 用戶的應用（內含 2

light / 2896人閱讀

摘要：令下半部分的子元素豎向排列橫向排列三組數據，每項之間加入細分隔線設置跳轉到的鏈接樣式和懸停效果至此，下半部分布局完成。接下來用偽元素把頭像圖片作為整體背景到這里，整體的靜態布局就完成了。

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/oQGqaG

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

第 1 部分：
https://scrimba.com/p/pEgDAM/cEPkVUg

第 2 部分：
https://scrimba.com/p/pEgDAM/crp63TR

（因為 scrimba 不支持 web animation api，第 2 部分末尾的動畫效果在視頻中看不到，請參考 codepen）

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

這是一個讀取 github 用戶的應用，在搜索框內輸入用戶名，點擊搜索后，就會通過 github 的 open api 取得用戶信息，填寫到下方的卡片中。

整個應用分成 3 個步驟開發：靜態的頁面布局、從 open api 讀取數據并綁定到頁面中、增加動畫效果。

一、頁面布局

定義 dom，整體結構分成上部的表單和下部的用戶卡片：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #383838;
}

定義應用容器的尺寸：

.app {
    width: 320px;
    height: 630px;
    font-family: sans-serif;
    position: relative;
}

這是表單的 dom 結構，2 個表單控件分別是文本輸入框 #username 和搜索按鈕 #search，因為后面的腳本要引用這 2 個控件，所以為它們定義了 id 屬性，接下來在 css 中也使用 id 選擇器：

令 2 個表單控件橫向排列：

form {
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
}

分別設置 2 個表單控件的樣式：

input {
    border: none;
    font-size: 14px;
    outline: none;
    border-radius: inherit;
    padding: 0 8px;
}
  
#username {
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.9);
    color: #42454e;
}
  
#search {
    background-color: rgba(0, 97, 145, 0.75);
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    margin-left: 8px;
    cursor: pointer;
}

為按鈕增加懸停和點擊的交互效果：

#search:hover {
    background-color: rgba(0, 97, 145, 0.45);
}

#search:active {
    transform: scale(0.98);
    background-color: rgba(0, 97, 145, 0.75);
}

至此，表單布局完成，接下來做用戶卡片布局。
用戶卡片的 dom 結構如下，卡片分成上半部分 .header 和下半部分 .footer，上半部分包括頭像 .avatar、名字 .name 和位置 .location，下半部分包括一組詳細的數據 .details 和一個跳到 github 的鏈接 .to-github：


    

        

        
Octocat

        
San Francisco

令卡片的上半部分和下半部分豎向排列，并分別設置兩部分的高度，大約是上半部分占卡片高度的三分之二，下半部分占卡片高度的三分之一，此時可以看出卡片的輪廓了：

.profile {
    width: 320px;
    position: absolute;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}

.header {
    height: 380px;
    background-color: rgba(0, 97, 145, 0.45);
}

.footer {
    height: 180px;
    background-color: rgba(0, 97, 145, 0.75);
}

令卡片上半部分的子元素豎向排列：

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

設置頭像圖片，樣式為描邊的圓形，因為頭像圖片在后面還會用到，所以把它存儲到變量 --avatar 中：

.profile {
    --avatar: url("https://avatars3.githubusercontent.com/u/583231?v=4");
}

.avatar {
    width: 140px;
    height: 140px;
    background-image: var(--avatar);
    margin: 70px 0 0 0;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 
        0 0 0 0.8em rgba(0, 0, 0, 0.2),
        0 0 0 1em rgba(161, 220, 255, 0.35);
}

設置名字和位置信息的樣式，文字為白色：

.name {
    margin: 50px 0 0 0;
    color: white;
    font-size: 28px;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.location {
    margin: 5px 0 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-weight: normal;
}

至此，上半部分的布局完成，接下來布局下半部分。
令下半部分的子元素豎向排列：

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

橫向排列三組數據，每項之間加入細分隔線：

.details {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 40px 0 0 0;
}

.details li {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 0 6px;
}

.details li span {
    display: block;
    color: rgba(255, 255, 255, 0.8);
}

.details li:not(:first-child) {
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}

設置跳轉到 github 的鏈接樣式和懸停效果：

.to-github {
    width: 200px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 20px;
    transition: 0.3s;
}

.to-github:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

至此，下半部分布局完成。
接下來用偽元素把頭像圖片作為整體背景：

.profile {
    position: relative;
    overflow: hidden;
}

.profile::before {
    content: "";
    position: absolute;
    width: calc(100% + 20px * 2);
    height: calc(100% + 20px * 2);
    background-image: var(--avatar);
    background-size: cover;
    z-index: -1;
    margin: -20px;
    filter: blur(10px);
}

到這里，整體的靜態布局就完成了。

二、綁定數據

為了綁定數據，我們引入一個羽量級的模板庫：

把卡片 .profile 包含的 dom 結構改寫為 html 模板 #template，其中的 o 代表綁定的數據數據對象：

聲明一個假數據對象 mockData，它的數據結構與 github open api 的數據結構是一致的：

let mockData = {
    "avatar_url": "https://avatars3.githubusercontent.com/u/583231?v=4",
    "name": "The Octocat",
    "location": "San Francisco",
    "public_repos": 111,
    "followers": 222,
    "following": 333,
    "html_url": "https://github.com/octocat",
}

定義一個把數據綁定到 html 模板的函數 render(container, data)，第 1 個參數 container 表示 dom 容器，模板內容將填充在此容器中；第 2 個參數是數據對象。在頁面載入時調用 render() 方法，把 mockData 作為參數傳入，此時看到的效果和純靜態的效果一致，但用戶卡片已經改為動態創建了：

window.onload = render(document.getElementsByClassName("profile")[0], mockData)

function render(container, data) {
    container.innerHTML = tmpl("template", data)
    container.style.setProperty("--avatar", `url(${data.avatar_url})`)
}

定義一個從 github open api 讀取用戶信息的方法 getData(username)，然后調用 render() 方法把用戶信息綁定到 html 模板。同時，把 window.onload 綁定的事件改為調用 getData() 方法，此時看到的效果仍和純靜態的效果一致，但數據已經變成動態讀取了：

window.onload = getData("octocat")

function getData(username) {
    let apiUrl = `https://api.github.com/users/${username}`
    fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => render(document.getElementsByClassName("profile")[0], data))
}

為表單的 search 按鈕綁定點擊事件，實現搜索功能。可以查一下自己的 github 帳號試試看：

document.getElementById("search").addEventListener("click", () => {
    let username = document.getElementById("username").value.replace(/[ ]/g, "")
    if (username == "") {
        return
    }
    getData(username)
})
三、增加動畫效果

為了能讓用戶感受到每次搜索后數據的變化過程，我們增加一點動畫效果。創建一個 update(data) 函數來處理動畫和渲染邏輯，同時把 getData() 函數的最后一步改為調用 update() 函數：

function getData(username) {
    let apiUrl = `https://api.github.com/users/${username}`
    fetch(apiUrl)
        .then((response) => response.json())
        // .then((data) => render(document.getElementsByClassName("profile")[0], data))
        .then(update)
}

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    render(current, data)
}

當頁面首次載入時，不需要動畫，直接渲染默認的用戶信息即可。變量 isInitial 表示本次調用是否是在初始化頁面時調用的，若是，就直接渲染。若不是，下面會執行動畫效果。

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }
}

動畫的過程是：創建一張新卡片，把數據綁定到新卡片上，然后把當前卡片移出視圖，再把新卡片移入視圖。下面的變量 next 代表新創建的卡片，把它定位到當前卡片的右側：

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)
}

因為動畫分成 2 個動作——當前卡片移出和新卡片移入，所以我們定義 2 個動畫效果，變量 animationOut 代表移出動畫的參數，變量 animationIn 代表移入動畫的參數。其中，keyframes 屬性值相當于寫 css 動畫時用 @keyframes 定義的關鍵幀，options 屬性值相當于寫 css 動畫時 animation 語句后面的參數，新卡片移入動畫有半秒鐘的延時。

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)

    let animationOut = {
        keyframes: [
            {left: "0", opacity: 1, offset: 0},
            {left: "-100%", opacity: 0, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards"
        }
    }

    let animationIn = {
        keyframes: [
            {left: "100%", opacity: 0, offset: 0},
            {left: "0", opacity: 1, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards",
            delay: 500
        }
    }
}

因為動畫需異步執行，即在當前卡片移出的動畫結束后再執行新卡片移入的動畫，所以我們令當前卡片移出的動畫結束后觸發 onfinish 事件，然后再執行新卡片移入的動畫，同時把舊卡片刪除掉：

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)

    let animationOut = {
        keyframes: [
            {left: "0", opacity: 1, offset: 0},
            {left: "-100%", opacity: 0, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards"
        }
    }

    let animationIn = {
        keyframes: [
            {left: "100%", opacity: 0, offset: 0},
            {left: "0", opacity: 1, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards",
            delay: 500
        }
    }

    let animate = current.animate(animationOut.keyframes, animationOut.options)
    animate.onfinish = function() {
        current.remove()
        next.animate(animationIn.keyframes, animationIn.options)
    }
}

最后，限定動畫效果僅在 .app 容器中展現：

.app {
    overflow: hidden;
}

大功告成！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108701.html

相關文章

  • 前端每日實戰 2018年10月至2019年6月項目匯總（共 20 個項目）

    摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀， 過往項目 2018 年 9 月份項目匯總（共 26 個項目） 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（...

    muddyway 評論0 收藏0

  • 前端每日實戰：162# 視頻演示如何用原生 JS 創作一個查詢 github 用戶的應用（內含 2

    摘要：令下半部分的子元素豎向排列橫向排列三組數據，每項之間加入細分隔線設置跳轉到的鏈接樣式和懸停效果至此，下半部分布局完成。接下來用偽元素把頭像圖片作為整體背景到這里，整體的靜態布局就完成了。 showImg(https://segmentfault.com/img/bVbjLk3?w=400&h=301); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 htt...

    OnlyLing 評論0 收藏0

  • 前端每日實戰：163# 視頻演示如何用原生 JS 創作一個多選一場景的交互游戲（內含 3 個視頻）

    摘要：本項目將設計一個多選一的交互場景，用進行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標明當前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/L...

    pakolagij 評論0 收藏0

發表評論

0條評論

light

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<