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 相关文章推荐
JavaScript小技巧 2.5 则
Sep 12 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
AngularJS实现多级下拉框
Mar 25 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php中对2个数组相加的函数
2011/06/24 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
python抽象基类用法实例分析
2015/06/04 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
python中get和post有什么区别
2020/06/19 Python
python 爬取小说并下载的示例
2020/12/07 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
我的求职计划书
2014/01/10 职场文书
迎接领导欢迎词
2014/01/11 职场文书
打造完美自荐信
2014/01/24 职场文书
节水倡议书范文
2014/04/15 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
师范类求职信
2014/06/21 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2014年会计工作总结
2014/11/27 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2016年感恩节寄语
2015/12/07 职场文书