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 动态添加表格行
Jun 22 Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
原生js实现碰撞检测
Mar 12 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Django框架models使用group by详解
2020/03/11 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
毕业生机械建模求职信
2013/10/14 职场文书
地震慰问信
2015/02/14 职场文书
教学副校长工作总结
2015/08/13 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
MYSQL 运算符总结
2021/11/11 MySQL
Python之matplotlib绘制折线图
2022/04/13 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers