好程序员web前端教程分javascript练习题-事件

原创

千锋教育培训 2019-11-14 19:47:05 博主文章分类：Java教程 ©著作权

文章标签 javascript 好程序员 web前端 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者千锋教育培训的原创作品，请联系作者获取转载授权，否则将追究法律责任

　　好程序员web前端教程分享前端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;

}}