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

　　好程序員web前端教程分享前端javascript練習題-事件
　　鍵盤控制div移動
如果需要在頁面中移動，要將元素脫離文檔流（否則會影響頁面佈局）

<div style="position: absolute;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[i].style.left=odiv[i-1].style.left;

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

}}