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; }} 

鼠标跟随特效：
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; }}