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学习历程和心得小结
Aug 16 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 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里的中文变量说明
2011/07/23 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php session_decode函数用法讲解
2019/05/26 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
市场总经理岗位职责
2014/04/11 职场文书
老公保证书范文
2014/04/29 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
《包身工》教学反思
2016/02/23 职场文书