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中通过URL传递汉字的方法
Apr 09 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
js 编写规范
Mar 03 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
jquery实现抽奖功能
Oct 22 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
浅谈php7的重大新特性
2015/10/23 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python 实现超级玛丽游戏
2020/11/25 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
求职简历中个人的自我评价
2013/12/01 职场文书
共产党员公开承诺书
2014/03/25 职场文书
员工教育培训协议书
2014/09/27 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
赞助商致辞
2015/07/30 职场文书