好程式設計師web前端教程分javascript練習題-事件

　　好程式設計師web前端教程分享 前端javascript練習題- 事件

　　 鍵盤控制div移動
如果需要在頁面中移動，要將元素脫離文件流（否則會影響頁面佈局）

<div style="position: absolute;width: 60px;height: 60px;"></div>

js實現程式碼：

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

document.>

    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.>

    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[i].style.left=odiv[i-1].style.left;

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

    }}