请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

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

[复制链接]
叶子老师 发表于 2019-11-14 19:01:55 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  好程序员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.style.left=odiv[i-1].style.left;
        odiv.style.top=odiv[i-1].style.top;
    }}


精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启