注册 登录
编程论坛 JavaScript论坛

鼠标点击在鼠标位置弹出层,层的位置怎么计算?

yms123 发布于 2010-10-21 10:01, 2069 次点击
如题如何能让层出现在鼠标点击光标所在的地方
4 回复
#2
gupiao1752010-10-21 14:48

<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>javascript取得鼠标地位</title>
<style type="text/css">
#block{position:absolute;font-size:9pt;background-color:#FFFFCC;padding:5px;border:1pxsolid#F5C66B;line-height:160%;width:300px;display:none;}
</style>
</head>
<body>
鼠标X轴:
<input id=xxx type=text>
鼠标Y轴:
<input id=yyy type=text>
<div id="block">3333</div>
<script>
function mouseMove(ev)
{
ev=ev||window.event;
var mousePos=mouseCoords(ev);
document.getElementById("xxx").value=mousePos.x;
document.getElementById("yyy").value=mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX||ev.pageY)
{return{x:ev.pageX,y:ev.pageY};}
else{
return{
x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,
y:ev.clientY+document.body.scrollTop-document.body.clientTop
};
}
}
var flag=false;
var di=document.getElementById("block")
function divv(ev)
{
ev=ev||window.event;
var mousePos=mouseCoords(ev);
 if(!flag)
   {
    flag=true;
   di.style.left=mousePos.x;
  di.style.top=mousePos.y;
  di.style.display="block";}
   else
   {
   flag=false;
   di.style.display="none";}
}
document.onmousemove=mouseMove;
document.onmousedown=divv;
</script>
</body>
不知道是不是类似这样的,用了最原始的JS方法,代码比较多了些!只测试了IE,还没有测试其他浏览器!
#3
Alar302010-10-22 10:15
LS的很强哇
#4
筱晓绾2010-10-22 10:21
试了下二楼的代码,不错哟!
#5
yms1232010-10-23 16:35
回复 2楼 gupiao175
Thank You这个功能已经实现
1