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

資訊專欄INFORMATION COLUMN

js 點(diǎn)擊上下左右鍵改變圖片位置

Ilikewhite / 3540人閱讀

摘要：看下面里面的，，，分別是左上右下的鍵值。這樣我們就可以實(shí)現(xiàn)上下左右鍵移動(dòng)圖片了。以像素為單位返回元素相對(duì)于版面或由屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置。

今天看了dom的一些知識(shí)，鞏固了一下js基礎(chǔ)，突然想到自己想做一個(gè)小汽車移動(dòng)的功能，所以二話不說，先來構(gòu)思一下：首先我們找一張小汽車的圖片，把它放在頁面中，然后需要用到上下左右鍵交互，所以必須用到j(luò)s中dom的知識(shí)了。




    
    car
    


    汽車

我為了讓效果看的更加明顯，把汽車放在了頁面正中間。接下來就要寫js了。首先我們必須明白，要讓圖片移動(dòng)必須先選中圖片，而且交互要交互在圖片上，有些朋友在這時(shí)候可能會(huì)想，鍵盤事件一般發(fā)生在輸入框之類當(dāng)中，讓圖片響應(yīng)鍵盤事件該怎么辦。知識(shí)都是一點(diǎn)點(diǎn)理解實(shí)踐起來的，所以我們?cè)谶@里想象一下：我們?nèi)绻玫搅藞D片，在圖片上添加img.onkeyup會(huì)有用嗎？這時(shí)候圖片是肯定不會(huì)響應(yīng)的，就相當(dāng)于我不想唱歌，非讓我唱，但是爸爸過來了，爸爸很嚴(yán)厲，他讓我唱！我只能唱，所以我們干嘛不加到document上呢。選定document，里面的圖片自然而然就選上了?？聪旅鎗s：



里面的37，38，39，40分別是左上右下的鍵值。這樣我們就可以實(shí)現(xiàn)上下左右鍵移動(dòng)圖片了。


有一個(gè)知識(shí)點(diǎn)，就是offset：
offsetTop：以 CSS 像素為單位返回元素上邊框距其 offsetParent 上邊框的距離。
offsetLeft：以 CSS 像素為單位返回元素相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置。
這里最主要的是找準(zhǔn) offsetParent。
其實(shí)很簡(jiǎn)單，比如我們要計(jì)算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent應(yīng)該是離A元素最近的父元素，并且父元素設(shè)置了position：relative或absolute屬性，如果沒有匹配到任何父元素，那么應(yīng)該以窗口為基準(zhǔn)計(jì)算元素的offsetTop。


完整代碼如下：





    
    car
    
    


    汽車




有不正確的地方望大家指教，祝大家早日富可敵國，bye~
           
               
                                           
                       
                 

            
                     
             
               

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

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

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    H5打造屬于自己的視頻播放器（JS篇2）
    
                                                     
    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。

回顧
算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js
播放視頻

播放按鈕隱藏

視頻開始播放  當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...
    
                                                   
                          
    
                                
    
                                    sPeng
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    H5打造屬于自己的視頻播放器（JS篇2）
    
                                                     
    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。

回顧
算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js
播放視頻

播放按鈕隱藏

視頻開始播放  當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...
    
                                                   
                          
    
                                
    
                                    bang590
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互
    
                                                     
    摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。


轉(zhuǎn)載自我的個(gè)人博客
歡迎大家批評(píng)指正


包括5部分：

小練習(xí)1-處理用戶輸入
小練習(xí)2-日期對(duì)象的使用
小練習(xí)3：輪播圖
小練習(xí)4：輸入提示框
小練習(xí)...
    
                                                   
                          
    
                                
    
                                    cnTomato
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互
    
                                                     
    摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。


轉(zhuǎn)載自我的個(gè)人博客
歡迎大家批評(píng)指正


包括5部分：

小練習(xí)1-處理用戶輸入
小練習(xí)2-日期對(duì)象的使用
小練習(xí)3：輪播圖
小練習(xí)4：輸入提示框
小練習(xí)...
    
                                                   
                          
    
                                
    
                                    趙春朋
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<