JavaScript經典案例：網頁元素跟蹤移動

效果展示：

CSS代碼：

<style type="text/css">
	#target {
		/* 拖動元素的前提是該元素脫離文檔流 */
		position: absolute;
		width: 150px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border: 0;
		border-radius: 10px;
		background: tomato;
	}
</style>
           

HTML + JavaScript代碼：

<div id="target">工具人</div>
<script type="text/javascript">
	window.onload = function() {
		var target = document.getElementById("target");
		document.onmousemove = function(event) {
			event = event || window.event; // 相容不同浏覽器
			var distanceX = document.body.scrollLeft || document.documentElement.scrollLeft;
			var distanceY = document.body.scrollTop || document.documentElement.scrollTop;
			target.style.left = event.pageX + distanceX + "px"; // 擷取滑鼠橫向位置的值
			target.style.top = event.pageY + distanceY + "px"; // 擷取滑鼠垂直位置的值
		}
	}
</script>