一、效果圖
二、需求描述
1、鼠標經過table每一行時，彈出div動態提示語；
2、div彈出層的位置隨鼠標位置的變化而變化；
3、鼠標離開table或獲取的動態提示語為空時，div彈出層消失。
下面我做了一個簡單的實現，第一次在博客園寫隨筆記錄下來。
三、實現思路
1、設計一個div彈出層的樣式。該div在頁面只有一個，哪里需要就往哪里搬。
2、獲取並保存鼠標的位置，定位div彈出層的位置。
3、獲取table每行隱藏的提示語，設置到div中區顯示。
4、使用鼠標經過和離開事件，對div進行控制。
四、具體實現步驟
1、定義div的HTML代碼如下：
<div class="hoverdiv">
<div style="text-align: center; vertical-align: middle;"><label id="message" style="color: #000000;"></label></div>
</div>
//保存鼠標的位置
<input type="hidden" id="pagex" />
<input type="hidden" id="pagey" />
2、div樣式
<style type="text/css">
.blockdiv{
width:285px;
height:30px;
display:none;
left: 977px;
top: 300px;
position: absolute;
z-index:1002;
opacity:1;
background:#D6D6D6;
}
</style>
3、需要鼠標經過table每一行，彈出div，table設計如下：
<table>
<thead>
<tr>
<th class="center">name</th>
<th>pass</th>
</tr>
</thead>
<tbody>
#foreach(${item} in ${draftPage.result})
<tr class="hoverTag">
<td>
<label>
<input type="hidden" name="message" value="$!dateTool.format("yyyy-MM-dd HH:mm:ss", $!{item.tagTime})">
</label>
</td>
<td>$!{item.name}</td>
<td>$!{item.pass}</td>
</tr>
#end
</tbody
</table>
4、鼠標經過和離開事件處理如下：
<script>
//獲取鼠標的位置，並保存到頁面隱藏域中
$(document).mousemove(function (e) {
document.getElementById("pagex").value = e.pageX;//pageX() 屬性是鼠標指針的位置，相對於文檔的左邊緣。
document.getElementById("pagey").value = e.pageY;//pageY() 屬性是鼠標指針的位置，相對於文檔的上邊緣。
});
var MouseEvent = function(e){
this.x = e.pageX;
this.y = e.pageY;
}
var Mouse = function(e){
var kdheight = jQuery(document).scrollTop();
mouse = new MouseEvent(e);
leftpx = mouse.x+15;
toppx = mouse.y-10;
}
$(".hoverTag").hover(
function (e) {//鼠標經過時業務處理
Mouse(e);
var message = e.currentTarget.firstElementChild.firstElementChild.lastElementChild.defaultValue;
if(message == null || message == '' || message == undefined){
$(".hoverdiv").css({
"display": "none",
});
$("#message").html("");
}else{
$(".hoverdiv").css({
"display": "block",
"left": leftpx,
"top": toppx,
});
$("#message").html(message);
}
},
function () {//鼠標離開時業務處理
$(".hoverdiv").css({
"display": "none",
});
$("#message").html("");
}
)
</script>