JavaScript 之 DOM Event 实例（眼睛紧盯着鼠标指向方向）

第一步（布局及样式）

.eyes{//垂直居中不再阐述
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;//眼睛会转化为行内块来居中
	width: 100%;
}
.eye{
	width: 240px;
	height: 120px;
	background: #eee;
	display: inline-block;
	margin: 40px;
	border-radius: 50%;
	position: relative;//给瞳孔定位的偏移基点
	overflow: hidden;//瞳孔不经过处理会溢出，在此隐藏
}
.ball{
	width: 40px;
	height: 40px;
	background: #000;
	position: absolute;//垂直水平居中
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;//瞳孔的边
	border: 15px solid #777;//瞳孔的边颜色与瞳仁要有差距这样才美观(颜值狗)
}
//======================================================
<div class="eyes">// 容纳眼睛的盒子
	<div class="eye">// 左眼
		<div class="ball"></div>// 瞳孔>
	</div>
	<div class="eye">// 右眼
		<div class="ball"></div>// 瞳孔>
	</div>
</div>

tips:这个布局很简单，本次案例主要是定位要理清楚,定位搞不清是看不懂滴(欢迎直接粘走(-^ 0 ^-))

第二步（JS代码编写）

<script type="text/javascript">
		var balls = document.getElementsByClassName("ball");
		document.onmousemove = function(){
			//相对于屏幕
			var x = event.clientX / innerWidth * 100 + "%";
			var y = event.clientY / innerHeight * 100 + "%";
			for(var i=0;i<2;i++){
				//定位的基点是以偏移方向的那一条边
				balls[i].style.left = x;
				balls[i].style.top = y;
				//定位基点从left和top并且是以父元素的大小偏移
				//若是鼠标移动到页面最右边和最底部X和Y达到100%时
				//瞳仁的位置就会超出父容器的显示区域(将会隐藏)
				//解决办法:根据自己的位置反方向偏移--->
				balls[i].style.transform = "translate(-"+x+",-"+y+")";
				//translate属性就是根据自己位置并且偏移位置是负的(反方向)
			}
		}
</script>

最后效果演示

水印去不掉，凑合看吧
这个案例主要是对DOM的事件对象的学习实践，我也是在其他地方学来的
如果想了解DOM Event 喏给你链接自己去看喽 W3C DOM Event 对象