鼠标跟随效果html,简单实现js鼠标跟随效果

Document

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;

}

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是存在冒泡传播的，想要阻止的话需要手动阻止