javascript 跟随鼠标移动的提示框的一个小demo

下面提供一种跟随鼠标移动的提示框的思路，方便在以后工作中应用，主要是应用到鼠标移动产生的数值来进行移动提示框的定位...

CSS代码

.box{height:100px;100px;background:orange;position:relative;margin:40px;}

.move{height:20px;20px;background:red;position:absolute;left:0px;top:0px;display:none;}

HTML代码

</div>

</div>

</div>

JAVASCRIPT代码

window.onload = function(){

//获取要执行事件的元素

var oWrap = document.getElementById('wrap');

//在IE8下不支持 getElementsByClassName，请自行写个函数或用其它方式代替

var aBox = oWrap.getElementsByClassName('box');

var aMove = oWrap.getElementsByClassName('move');

//遍历所有的box元素

for(var i=0; i<aBox.length ; i++){

//获取当前触发事件的元素

(function(i){

//在box元素范围内移动的时候那么就会产生相应的数值

aBox[i].onmousemove=function(ev){

var oEvent = ev || event;

//获取鼠标的当前位置

var disX = oEvent.clientX - aBox[i].offsetLeft;

var disY = oEvent.clientY - aBox[i].offsetTop;

//如果鼠标位置超出了范围那么就让隐藏

if (disX >= this.offsetWidth) {

aMove[i].style.display = 'none';

}else if (disY >= this.offsetHeight) {

aMove[i].style.display='none';

};

//定义move元素移动的位置

aMove[i].style.left = disX + 'px';

aMove[i].style.top = disY + 'px';

}

//鼠标进入的时候显示

aBox[i].onmouseover = function(){

aMove[i].style.display = 'block';

}

//鼠标移除的时候隐藏

aBox[i].onmouseout = function(){

aMove[i].style.display = 'none';

}

})(i)

}