简单实现js鼠标跟随效果

本文实例为大家分享了js鼠标跟随效果展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body,div{
   margin:0;
   padding:0;

  }
  #box{
   position:relative;
   margin:20px auto;
   width:300px;
   height:300px;
   background:#008000;
  }
  #mark{
   position:absolute;
   top:0;
   left:0;
   width:100px;
   height:100px;
   background:red;
  }
 </style>
</head>
<body>
 <div id='box'>
  
 </div>
 <script>
  var box = document.getElementById('box');

  box.onmouseover = function(e){
   e = e || window.event;
   var mark = document.createElement('div');
   mark.id = "mark";
   this.appendChild(mark);
   mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
   mark.style.top = e.clientY - this.offsetTop + 5 + "px";
   //阻止mark盒子的onmouseover事件的冒泡传播
   mark.onmouseover = function(e){
    e = e || window.event;
    e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
   }
   mark.onmouseout = function(e){
    e = e || window.event;
    e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
   }
  }
  //以下代码会出现一个问题，当鼠标移动过快的时候，鼠标会进入到mark这个盒子，会触发它的mouseover行为，由于事件的冒泡传播机制，导致box的mouseover会重新被触发，导致红色盒子一直在不断的创建
  box.onmousemove = function(e){
   e = e || window.event;
   var mark = document.getElementById('mark');
   if(mark){
    mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
    mark.style.top = e.clientY - this.offsetTop + 5 + "px";
   }

  }
  //依然有问题：鼠标快速移动，首先会到mark上，此时浏览器在计算mark的位置，计算完成，mark到达指定的位置，此时鼠标又重新回到box上，触发了box的mouseover，也触发了mark的mouseout，也会传播到box的mouseout上，会把mark先删除，然后在创建
  box.onmouseout = function(e){
   e = e || window.event;
   var mark = document.getElementById('mark');
   if(mark){
    this.removeChild(mark);
   }

  }

  //上面代码也可以通过将over和out事件分别改为enter和leave 
  //onmouseenter和onmouseover都是鼠标滑上去的行为，但是onmouseenter浏览器默认阻止了它的冒泡传播（mark的onmouseenter行为触发，不会传播到box）；而onmouseover是存在冒泡传播的，想要阻止的话需要手动阻止
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 鼠标跟随 # js实现简单鼠标跟随效果的方法 # js鼠标跟随运动效果 # javascript鼠标跟随运动3种效果（眼球效果 # 苹果菜单 # 方向跟随） # Js鼠标跟随代码小手点击实例方法 # JS实现的简单鼠标跟随DiV层效果完整实例 # JS实现的鼠标跟随代码(卡通手型点击效果) # js实现鼠标跟随运动效果 # 原生js实现鼠标跟随效果 # JavaScript实现的鼠标跟随特效示例【2则实例】 # js实现鼠标跟随小游戏 # 鼠标 # 都是 # 也会 # 可以通过 # 一个问题 # 会把 # 大家分享 # 过快 # 具体内容 # 大家多多 # 当鼠标 # body # div # padding # margin # title # UTF # style # Document # auto

返回目录在线咨询

上一篇：域名精选与建站优化指南：提升关键词排名及流量覆盖技巧
下一篇：C++ extern C的作用_C++与C语言混合编程技巧详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

简单实现js鼠标跟随效果

您的项目需求