在画图工具中，当我们移动鼠标时，左下角会显示相应的x，y坐标；当我们移出鼠标时，左下角的内容会消失。
现，我们通过JS中的onmousemove()以及onmouseout()事件，来简单地实现此功能。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
position: relative;
background-color: #cecece;
height: 500px;
width: 500px;
}
span{
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var oSpan=document.getElementsByTagName('span')[0];
oDiv.onmousemove=function(e){
var evt=e||event;
var x=evt.clientX;
var y=evt.clientY;
oSpan.innerHTML=x+","+y+"px";
}
oDiv.onmouseout=function(){
oSpan.innerHTML="";
}
</script>
</body>
</html>
2005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
