下面提供一種跟隨鼠標移動的提示框的思路，方便在以后工作中應用，主要是應用到鼠標移動產生的數值來進行移動提示框的定位...
CSS代碼
.box{height:100px;width:100px;background:orange;position:relative;margin:40px;}
.move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;}
HTML代碼
<div id="wrap">
<div class="box">
<div class="move">提示</div>
</div>
<div class="box">
<div class="move">提示</div>
</div>
<div class="box">
<div class="move">提示</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)
}
}