javascript練習題-事件

　　前端javascript練習題-事件

　　鍵盤控制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;

}}
           

滑鼠跟随特效：

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

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

}}