JS指定DIV展示
日期：2014-05-16 浏览次数：20372 次
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态获取鼠标位置(兼容IE、FF)</title>
<script>
var mousex;
var mousey;
function mouseMove(e){
?var obj=e||window.event;
?var mousePos = mouseCoords(obj);
?mousex=mousePos.x;
?mousey=mousePos.y;
}
function mouseCoords(obj){
?if(obj.pageX||obj.pageY){//FF浏览器
? return {x:obj.pageX, y:obj.pageY};
?}
?//IE浏览器
?return {x:obj.clientX + document.body.scrollLeft-document.body.clientLeft,y:obj.clientY + document.body.scrollTop-document.body.clientTop}
}
document.onmousemove = mouseMove;
var s;
var w =1;
function showInfo(){
var d = document.getElementById("ss");
d.style.display = 'block';
d.style.top = (mousey-10)+'px';
d.style.left = (mousex-320)+'px';
document.getElementById("x").value = mousex;
document.getElementById("y").value = mousey;
if(w==1){
s = d.innerHTML;
w=2;
}
d.innerHTML = s+"ssssssssssssssssssssssssss";
}
function closeDiv(){
document.getElementById("ss").style.display = 'none';
}
</script>
</head>
<body>
<div id="ss" style="border: 1px solid #000; background-color:#F00; width:300px; height:300px;display:none; position:absolute; z-index:9999; margin:0px 0px 0px 0px; padding:0px; ">
<div style="text-align:right; width:100%;margin:0px 0px 0px 0px; padding:0px "><input type="button" value="×" onclick="closeDiv();" ?style=" padding:0px; margin:0px 0px 0px 0px;"/></div>
?
</div>
<table border="1px" width="100%" cellpadding="0px" cellspacing="0px" style="text-align:center;">
<tr>
?? ? <td>a</td>
?? ? ? ?<td>b</td>
?? ? ? ?<td>c</td>
?? ? ? ?<td ?onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
?? ? ? ?<td>e</td>
?? ?</tr>
?? ?<tr>
?? ? <td>a</td>
?? ? ? ?<td>b</td>
?? ? ? ?<td>c</td>
?? ? ? ?<td ?onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
?? ? ? ?<td>e</td>
?? ?</tr>
?? ?<tr>
?? ? <td>a</td>
?? ? ? ?<td>b</td>
?? ? ? ?<td>c</td>
?? ? ? ?<td ?onmouseout="closeDiv();" onmouseover="showInfo();" style="color:#009">dddddddddddddddddddddd</td>
?? ? ? ?<td>e</td>
?? ?</tr>
?? ?<tr>
??
