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 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP 模拟$_PUT实现代码
2010/03/15 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP目录操作实例总结
2016/09/27 PHP
php验证码生成器
2017/05/24 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python九九乘法表的实例
2017/09/26 Python
python爬虫实现获取下一页代码
2020/03/13 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
2014年安全生产大检查方案
2014/05/13 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
试用期自我评价范文
2015/03/10 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
Pandas 数据编码的十种方法
2022/04/20 Python