JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考,具体如下:

1. 盒子跟着鼠标移动

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
    margin:0;
    padding:0;
  }
    div{
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  document.onmousemove=function fn(ev) {
    var event=window.event||ev;
    var oDiv=document.getElementsByTagName("div");
    for(x=0;x<oDiv.length;x++){
      oDiv[x].style.transition=(x*0.5)+"s";
      oDiv[x].style.left=event.clientX+"px";
      oDiv[x].style.top=event.clientY+"px";
    }
  }
</script>
</body>
</html>

2. 键盘方向键控制盒子移动

<html>
<head>
  <meta charset="utf-8" />
  <style type="text/css">
    div{
      width:100px;
      height:100px;
      background: red;
      position:absolute;
      left:100px;
      top:100px;
      transition: 0.1s;
    }
  </style>
  <script>
        window.onload = function(){
      var oDiv = document.getElementById("div1");
      var left = false;
      var right = false;
      var top = false;
      var bottom = false;
      document.onkeydown = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;
        switch(keyCode){
          case 37:
            left=true;
            break;
          case 38:
            top=true;
            break;
          case 39:
            right=true;
            break;
          case 40:
            bottom=true;
            break;
        }
      };
      setInterval(function(){
        if(left){
          oDiv.style.left = oDiv.offsetLeft-10+"px";
        }else if(top){
          oDiv.style.top = oDiv.offsetTop-10+"px";
        }else if(right){
          oDiv.style.left = oDiv.offsetLeft+10+"px";
        }else if(bottom){
          oDiv.style.top = oDiv.offsetTop+10+"px";
        }
      },50);
      document.onkeyup = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;
        switch(keyCode){
          case 37:
            left=false;
            break;
          case 38:
            top=false;
            break;
          case 39:
            right=false;
            break;
          case 40:
            bottom=false;
            break;
        }
      }
    }
  </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
You might like
浅析php单例模式
2014/11/25 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python生成圆形图片的方法
2020/03/25 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
简述数据库的设计过程
2015/06/22 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
森林防火工作方案
2014/02/14 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
新闻编辑求职信
2014/07/13 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript