好玩的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 {
}
完整的代码我已经上传啦