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对象和DOM对象相互转化
Apr 24 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
Protoss建筑一览
2020/03/14 星际争霸
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python中__name__的使用实例
2015/04/14 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
树莓派升级python的具体步骤
2020/07/05 Python
军训学生自我鉴定
2014/02/12 职场文书
幼儿教师国培感言
2014/02/19 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
销售合作意向书范本
2015/05/08 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
法人代表资格证明书
2015/06/18 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫