javascript练习题-事件-阿里云开发者社区

开发者社区> 好程序员> 正文

javascript练习题-事件

简介:   前端javascript练习题-事件  键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.
+关注继续查看

  前端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;

}}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7251 0
javascript练习题-事件
  前端javascript练习题-事件  键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.
535 0
Javascript事件绑定的几种方式
 Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。
890 0
+关注
333
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载