google_eye 的js实现

最新推荐文章于 2024-04-12 11:06:25 发布

原创最新推荐文章于 2024-04-12 11:06:25 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google eye #javascript #google eye制作效果 #ViewUI

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个利用HTML、CSS和JavaScript实现的 GoogleEye 动画效果，通过鼠标移动来改变眼睛瞳孔的位置，创建出互动的视觉体验。

好玩的google eye 实现：

index.html

<!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=gb2312" />
<title>Google Eye</title>
<link href="css/global.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/core.js"></script>
</head>
<body>
	<h1>Google Eye</h1>
	<div id="main">
		<h2>眼睛</h2>
		<p>
			<span id="eyeLeft">
				<img id="pupilLeft" src="images/pupil.gif" alt="Google Eye Pupil" />
			</span>
			<span id="eyeRight">
				<img id="pupilRight" src="images/pupil.gif" alt="Google Eye Pupil" />
			</span>
		</p>
	</div>
</body>
</html>

core.js

(function ($) {
	var eyeLeft,eyeRight,pupilLeft,pupilRight;
	/**主体函数,在页面加载时自动执行
	 * eyeLeft,左边的眼睛 span
	 * eyeRight,右边的眼睛 span
	 * pupilLeft,左边的瞳孔图片
	 * pupilRight,右边的瞳孔图片
	 */
	
	//当页面加载完成后,初始化
	addEvent(window,"load",function () {
		//分别获取元素
		eyeLeft=$("eyeLeft");
		eyeRight=$("eyeRight");
		pupilLeft=$("pupilLeft");
		pupilRight=$("pupilRight");
		
		//当鼠标上页面上移动时,执行movePupil
		addEvent(document,"mousemove",movePupil);
	});
	
	function movePupil(evt) {
		/**movePupil,获取鼠标位置,并调用setPupilPos函数
		 * 
		 * @param evt Event 在支持W3C标准事件机制的浏览器中,事件对象会作为第一个参数传递给事件处理函数
		 * 
		 * 在IE中,事件对象作为全局event出现
		 */
		evt = evt || window.event;//获取事件对象
		var MousePos = {//获取鼠标位置
			x:evt.clientX,
			y:evt.clientY
		};
		
		//调用setPupilPos函数,去计算并设置瞳孔图片应在的位置
		setPupilPos(eyeLeft,pupilLeft,MousePos);
		setPupilPos(eyeRight,pupilRight,MousePos);
	}
	
	function setPupilPos(eye,pupil,MousePos) {
		/**setPupilPos 计算并设置瞳孔图片的位置
		 * 
		 * @param eye Object 瞳孔容器眼睛 DOM对象
		 * @param pupil Obejct 与眼睛对应的瞳孔图片
		 * @param MousePos Object 包含鼠标位置信息的对象
		 */
		
		var eyePos=getPos(eye);//获取眼睛对象的位置
		var eyeHPos={//获取眼睛中心的位置
			x:eyePos.x+parseInt(eye.offsetWidth/2),
			y:eyePos.y+parseInt(eye.offsetHeight/2)
		};
		
		//计算眼睛中心与鼠标所在点的距离
		var distance=calcHyp(eyeHPos.x-MousePos.x,eyeHPos.y-MousePos.y);
		if (Math.abs(distance)<=34 ) {//当距离小于34,即在眼睛内部时,直接将瞳孔的位置设为鼠标的位置
			pupil.style.left = (MousePos.x-eyePos.x-6)+"px";//6是瞳孔的半径,这样使瞳孔中心位置与鼠标位置相重合
			pupil.style.top = (MousePos.y-eyePos.y-6)+"px";
		} else {//当鼠标上眼睛外面时,需要计算角度
			var sin= (eyeHPos.y-MousePos.y)/distance;//角度正弦值
			var cos=(eyeHPos.x-MousePos.x)/distance;//角度余弦值
			//瞳孔图片是采用相对于眼睛(其父元素)的定位方式,40是瞳孔活动范围半径,58是眼睛半径
			pupil.style.left= 58-cos*40-6+"px";
			pupil.style.top=58-sin*40-6+"px";
		}
	}
	
	function calcHyp(x,y) {
		/**calcHyp 通过直角三角形的已知两边计算斜边的长度
		 * 
		 * @param x Number 直角三角形的底边
		 * @param y Number 直角三角形的高
		 * @return Number 直角三角形斜边的长度
		 * 
		 */
		return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
	}
	function getPos(obj) {
		/**getPos 获取DOM对象在页面中的绝对坐标
		 * 
		 * @param obj Object DOM对象
		 * @return pos Object 包括坐标信息的对象
		 * 
		 * 获取DOM元素相对于定位参考祖先元素的位置是使用对象的offsetLeft及offsetTop属性
		 * 获取DOM元素的定位参考祖先元素是使用对象的offsetParent属性
		 * 通过递归,可以获取元素相对于页面(document.body,document.body.offsetParent为null)的坐标
		 */
		var pos={//初始值为0
			x:0,
			y:0
		};
		do {
			pos.x+= obj.offsetLeft;
			pos.y+=obj.offsetTop;
		} while(obj=obj.offsetParent);//当存在offsetParent时(即没有到达顶层body时)一直循环,并更新obj
		return pos;
	}
	
	function addEvent(obj,evtype,fn) {
		/**addEvent 给元素添加事件监听
		 * 
		 * @param obj Object DOM元素或window对象等
		 * @param evtype String 不带"on"前缀的事件名称
		 * @param fn Function 事件处理函数
		 * @return Object 该元素
		 */
		//优先考虑W3C事件机制
		if (obj.addEventListener) obj.addEventListener(evtype,fn,false);
		//否则,再考虑IE的情况,IE的事件名称需要加上"on"前缀
		else if (obj.attachEvent) obj.attachEvent("on"+evtype,fn);
		//如果上面两种事件注册方法都不支持,则使用传统的方法(这种情况几乎不会出现)
		else obj["on"+evtype]=fn;
		return obj;
	}
})(function (id) {
	/**DOM元素 ID选择器
	 * 
	 * @param id String 元素的ID
	 * @return Object DOM元素
	 * 
	 * 这个函数作为一个参数传递给了另一个匿名函数,采用这种写法仅仅因为更习惯^0^
	 * 因为jQuery中也将选择器做为第一个参数传递给jQuery(function ($){})其中的匿名函数
	 */
	return document.getElementById(id);
});

global.css

* {
	margin:0;
	padding:0;
}
body {
	font-size:12px;
}
h1 {
	line-height:400%;
	text-align:center;
	font-size:30px;
}
#main {
	width:324px;
	margin:10px auto;
	border:1px solid #E1ECFE;
}
#main h2 {
	padding:4px 0;
	text-indent:12px;
	color:#666;
	background:#E1ECFE;
}
#main p {
	display:block;
	width:244px;
	height:117px;
	margin:10px 40px;
}
#main p span img {
	position:absolute;
	left:51px;
	top:51px;
	width:14px;
	height:14px;
}
span#eyeLeft,span#eyeRight {
	display:block;
	position:relative;
	width:116px;
	height:116px;
	float:left;
	background:url("../images/eye-r.gif") no-repeat center;
}
span#eyeRight {
	background-image:url("../images/eye-y.gif");
}

span#eyeLeft #pupilLeft {
}

完整的代码我已经上传啦