web前端教程分享前端 javascript 練習(xí)題-事件

鍵盤控制div移動(dòng)

如果需要在頁(yè)面中移動(dòng)，要將元素脫離文檔流（否則會(huì)影響頁(yè)面布局）

<div style="position: absolute;background-color:pink;width: 60px;height: 60px;"></div>

js實(shí)現(xiàn)代碼：

var odiv=document.getElementsByTagName("div")[0];

document.onkeydown=function(e){

    var evt=e||event; 

    var x=odiv.offsetLeft;  //獲取div的坐標(biāo)值

    var y=odiv.offsetTop;

    var code=evt.keyCode;  //獲取鍵盤碼

    switch (code){   //當(dāng)按下方向鍵，執(zhí)行對(duì)應(yīng)的功能

        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;

    }}

鼠標(biāo)跟隨特效：

js實(shí)現(xiàn)代碼：

for(var i=0;i<10;i++){  //創(chuàng)建10個(gè)div，并加入到頁(yè)面中

    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;  //獲取鼠標(biāo)的坐標(biāo)

    var y=evt.clientY;

    odiv[0].style.left=x+"px";  //讓第一個(gè)跟隨鼠標(biāo)移動(dòng)

    odiv[0].style.top=y+"px";

    //讓后一個(gè)跟隨前一個(gè)移動(dòng)

    for(var i=odiv.length-1;i>0;i--){

        odiv[i].style.left=odiv[i-1].style.left;

        odiv[i].style.top=odiv[i-1].style.top;

    }}