一个好的程序员的web前端教程分为javascript习题-活动
时间:2023-04-02 15:10:14
HTML
好的程序员web前端教程分享前端javascript习题-事件 键盘控制div移动如果需要在页面中移动,必须将元素与文档流分开(否则会影响页面布局)
js实现代码:varodiv=document.getElementsByTagName("div")[0];document.onkeydown=function(e){varevt=e||事件;varx=odiv.offsetLeft;//获取div的坐标值vary=odiv.offsetTop;varcode=evt.keyCode;//获取键盘代码开关(code){//当方向键按下时,执行相应的函数case38:odiv.style.left=x+"px";odiv.style.top=y-10+"px";休息;案例40:odiv.style.left=x+"px";odiv.style.top=y+10+"px";休息;case37:odiv.style.left=x-10+"px";odiv.style.top=y+"px";休息;案例39:odiv.style.left=x+10+"px";odiv.style.top=y+"px";break;}}鼠标跟随特效:js实现代码:for(vari=0;i<10;i++){//创建10个div,并添加到页面中vardv=document.createElement("div");document.body.appendChild(dv);}varodiv=document.getElementsByTagName("div");document.onmousemove=function(e){varevt=e||event;varx=evt.clientX;//获取鼠标坐标vary=evt.clientY;odiv[0].style.left=x+"px";//让第一个用鼠标移动odiv[0].style.top=y+"px";//让下一个跟在上一个之后for(vari=odiv.length-1;i>0;i--){odiv[i].style.left=odiv[i-1].style.left;odiv[i].style.top=odiv[i-1].style.top;}}