成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端每日實戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個多選一場景的交互游戲（內(nèi)含 3 個視頻）

pakolagij / 2510人閱讀

摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。

效果預(yù)覽

按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。

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

可交互視頻

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

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

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

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

第 3 部分：
https://scrimba.com/p/pEgDAM/cvgP8td

源代碼下載

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

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

代碼解讀

多選一的場景是很常見的，瀏覽器自帶的 控件就適用于這樣的場景。本項目將設(shè)計一個多選一的交互場景，用 css 進(jìn)行頁面布局、用 gsap 制作動畫效果、用原生 js 編寫程序邏輯。

這個游戲的邏輯很簡單，在頁面上部展示出一個動物的全身像，請用戶在下面的小圖片中選擇這個動物對應(yīng)的頭像，如果選對了，就可以再玩一次。

整個游戲分成 3 個步驟開發(fā)：靜態(tài)的頁面布局、程序邏輯和動畫效果。

一、頁面布局

定義 dom 結(jié)構(gòu)，容器中包含標(biāo)題 h1、全身像 .whole-body、當(dāng)選擇正確時的提示語 .bingo、“再玩一次”按鈕 .again、一組選擇按鈕 .selector。.selector 中包含 5 個展示頭像的 .face 和 1 個標(biāo)明當(dāng)前被選中頭像的 .slider。全身像和頭像沒有使用圖片，都用 unicode 字符代替：


        
Which face is the animal"s?

        
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99607.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    前端每日實戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個多選一場景的交互游戲（內(nèi)含 3 個視頻）
    
                                                     
    摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。

showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302);
效果預(yù)覽
按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/L...
    
                                                   
                          
    
                                
    
                                    antz
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每日實戰(zhàn)：163# 視頻演示如何用原生 JS 創(chuàng)作一個多選一場景的交互游戲（內(nèi)含 3 個視頻）
    
                                                     
    摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。

showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302);
效果預(yù)覽
按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/L...
    
                                                   
                          
    
                                
    
                                    The question
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每日實戰(zhàn) 2018年10月至2019年6月項目匯總（共 20 個項目）
    
                                                     
    摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，

過往項目
2018 年 9 月份項目匯總（共 26 個項目）
2018 年 8 月份項目匯總（共 29 個項目）
2018 年 7 月份項目匯總（...
    
                                                   
                          
    
                                
    
                                    muddyway
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
閱讀需要支付1元查看
<