JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例-创新互联

本文实例讲述了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>

上一篇：左右手势的滑动，来切换页面-创新互联

下一篇：一文搞懂MySQL的Join，聊一聊秒杀架构设计-创新互联