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 12 Javascript
javascript event 事件解析
Jan 31 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
详解vuex commit保存数据技巧
Dec 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
PHP常用代码
2006/11/23 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php简单分页类实现方法
2015/02/26 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Three.js学习之网格
2016/08/10 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python translator使用实例
2008/09/06 Python
讲解python参数和作用域的使用
2013/11/01 Python
Python pickle模块用法实例分析
2015/05/27 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
公司活动策划方案
2014/01/13 职场文书
网页美工求职信
2014/02/15 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Python中的tkinter库简单案例详解
2022/01/22 Python