div随鼠标一起移动-->笔记

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X">
		<title>div随鼠标一起移动title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background-color: antiquewhite;
				position: absolute;
			}
		style>
	head>
	<body style="height: 2000px;">
		<div id="box">div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			//box.onmousemove = function(event){
				//对box盒子绑定对象,只能在div区域内才可以触发事件
			document.onmousemove = function(event){
				
				// alert("测试鼠标移动!");
				
				// 获取坐标值x和y
				//用于获取鼠标在当前可见窗口的坐标值
				// var x = event.clientX;
				// var y = event.clientY;
				
				//用于获取鼠标当前页的坐标(用的比较多)
				//因为body设置了页面的高度,出现了滚动条,所以用该方法获取
				var x = event.pageX;
				var y = event.pageY;
				
				//让div跟随x和y
				
				//设置div的偏移量
				box.style.left = x+"px";
				box.style.top = y+"px";
				
				//left:100px;
			}
		script>
	body>
html>

你可能感兴趣的:(Web前端,css,css3,javascript)