js 페이지 좌표점 가져오기

1829 단어
<!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=utf-8" />
		<title> </title>
		<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
		<script type="text/javascript">
	$( function() {
		var d3 = $("#d3");
		var d2 = $("#d2");
		var d1 = $("#d1");
		$(d2).hide();
		$(d1).mousemove( function() {
			var x = event.offsetX;
			var y = event.offsetY;
			var a = " x:" + x + ",Y:" + y + "<br>";
			var x2 = event.clientX;
			var y2 = event.clientY;
			var a2 = " x:" + x2 + ",Y:" + y2;
			$(d3).show();
			$(d3).empty().append(a + a2);
		})
		$(d1).click( function() {
			var x = event.offsetX;
			var y = event.offsetY;
			var a = "x:" + x + ",Y:" + y;
			$(d2).show();
			$(d2).css("top", y).css("left", x);
			$(d2).empty().append(a);
		})
		$(d1).mouseout( function() {
			$(d2).hide();
		})
	})
</script>
		<style>
#d1 {
	width: 500px;
	height: 300px;
	background: #CCC;
	border: 1px solid #666;
	position: relative;
	left: 100px;
	top: 100px;
}

#d2 {
	height: 22px;
	display: block;
	line-height: 22px;
	background: #FFF;
	border: 1px solid #FF0;
	position: absolute;
}

#d3 {
	position: relative;
	left: 100px;
	top: 100px;
}
</style>
	</head>
	<body>
		<div id="d1">
			 
			<br>
			 div 
			<div id="d2"></div>
		</div>
		<div id="d3"></div>
	</body>
</html>

좋은 웹페이지 즐겨찾기