web前端教程分享javascript 练习题-事件

　　web前端教程分享前端 javascript 练习题-事件

键盘控制div移动

如果需要在页面中移动，要将元素脱离文档流（否则会影响页面布局）

<div style="position: absolute;background-color:pink;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;

    }}