• <dd id="by9vk"><pre id="by9vk"></pre></dd>
  • <dd id="by9vk"></dd>
    <progress id="by9vk"><pre id="by9vk"></pre></progress><tbody id="by9vk"></tbody>
    <tbody id="by9vk"></tbody>

    <rp id="by9vk"><ruby id="by9vk"></ruby></rp>

    好程序員-千鋒教育旗下高端IT職業教育品牌

    400-811-9990
    我的賬戶
    好程序員

    專注高端IT職業培訓

    親愛的猿猿,歡迎!

    已有賬號,請

    如尚未注冊?

    [HTML5] 好程序員web前端教程分享javascript 練習題-事件

    [復制鏈接]
    120 0
    葉子老師 發表于 6 天前 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
      好程序員web前端培訓分享前端 javascript 練習題-事件
    鍵盤控制div移動
    如果需要在頁面中移動,要將元素脫離文檔流(否則會影響頁面布局)
    <div style="position: absolute;background-color:pink;width: 60px;height: 60px;"></div>
    js實現代碼:
    var odiv=document.getElementsByTagName("div")[0];
    document.onkeydown=function(e){
        var evt=e||event;
        var x=odiv.offsetLeft;  //獲取div的坐標值
        var y=odiv.offsetTop;
        var code=evt.keyCode;  //獲取鍵盤碼
        switch (code){   //當按下方向鍵,執行對應的功能
            case 38:
                odiv.style.left=x+"px";
                odiv.style.top=y-10+"px";
                break;
            case 40:
                odiv.style.left=x+"px";
                odiv.style.top=y+10+"px";
                break;
            case 37:
                odiv.style.left=x-10+"px";
                odiv.style.top=y+"px";
                break;
            case 39:
                odiv.style.left=x+10+"px";
                odiv.style.top=y+"px";
                break;
        }}
    鼠標跟隨特效:
    js實現代碼:
    for(var i=0;i<10;i++){  //創建10個div,并加入到頁面中
        var dv=document.createElement("div");
        document.body.appendChild(dv);}var odiv=document.getElementsByTagName("div");
    document.onmousemove=function(e){
        var evt=e||event;
        var x=evt.clientX;  //獲取鼠標的坐標
        var y=evt.clientY;
        odiv[0].style.left=x+"px";  //讓第一個跟隨鼠標移動
        odiv[0].style.top=y+"px";
        //讓后一個跟隨前一個移動
        for(var i=odiv.length-1;i>0;i--){
            odiv.style.left=odiv[i-1].style.left;
            odiv.style.top=odiv[i-1].style.top;
        }}


    精彩內容,一鍵分享給更多人!
    收藏
    收藏0
    轉播
    轉播
    分享
    淘帖0
    支持
    支持0
    反對
    反對0
    回復

    使用道具 舉報

    您需要登錄后才可以回帖

    本版積分規則

    關注我們
    好程序員
    千鋒好程序員

    北京校區(總部):北京市海淀區寶盛北里西區28號中關村智誠科創大廈

    深圳西部硅谷校區:深圳市寶安區寶安大道5010號深圳西部硅谷B座A區605-619

    杭州龍馳智慧谷校區:浙江省杭州市下沙經濟技術開發區元成路199號龍馳智慧谷B座7層

    鄭州校區:鄭州市二七區航海中路60號海為科技園C區10層、12層

    Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right

    京ICP備12003911號-5 京公安網11010802011455號

    請您保持通訊暢通1對1咨詢馬上開啟

    Pictoa