<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GoogleEye.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var eye1;
var eye2;
function load()
{
eye1 = new Eye();
eye1.init();
eye2 = new Eye();
eye2.init();
eye2.circle.style.border = "1px solid yellow";
eye2.moveTo(320, 200);
}
function Eye()
{
this.distance = 53;
this.middlex = 200;
this.middley = 200;
// 眼圈
this.circle = document.createElement('div');
document.getElementById('eye').appendChild(this.circle);
this.circle.style.border = "1px solid red";
this.circle.style.position = "absolute";
this.circle.style.display = "block";
this.circle.style.width = this.distance * 2;
this.circle.style.height = this.distance * 2;
this.circle.style.top = this.middley - this.distance;
this.circle.style.left = this.middlex - this.distance;
// 眼球
this.ball = document.createElement('div');
this.circle.appendChild(this.ball);
this.ball.style.backgroundColor = "black";
this.ball.style.position = "absolute";
this.ball.style.display = "block";
this.ball.style.width = "6px";
this.ball.style.height = "6px";
this.ball.style.top = this.distance;
this.ball.style.left = this.distance;
this.init = function()
{
if (window.attachEvent)
{
window.attachEvent("onmousemove", this.move);
} else
{
window.addEventListener("mousemove", this.move, false);
}
}
var own = this;
this.setSize = function(distan)
{
this.distance = distan;
this.circle.style.width = this.distance * 2;
this.circle.style.height = this.distance * 2;
this.circle.style.top = this.middley - this.distance;
this.circle.style.left = this.middlex - this.distance;
this.ball.style.top = this.distance;
this.ball.style.left = this.distance;
}
this.moveTo = function(x, y)
{
this.middlex = x;
this.middley = y;
this.circle.style.top = this.middley - this.distance;
this.circle.style.left = this.middlex - this.distance;
}
this.move = function(event)
{
var even;
if (window.event)
{
even = window.event;
} else
{
even = event;
}
var xpos = even.clientX;
var ypos = even.clientY;
xpos -= own.middlex;
ypos -= own.middley;
var dist = Math.sqrt(xpos * xpos + ypos * ypos);
if (dist < own.distance)
{
own.ball.style.top = ypos + own.distance;
own.ball.style.left = xpos + own.distance;
} else
{
var k, y, x;
if (ypos != 0)
{
k = xpos / ypos;
y = own.distance / Math.sqrt(k * k + 1);
if (ypos < 0)
y = -y;
x = k * y;
} else
{
y = 0;
x = own.distance;
if (xpos < 0)
x = -x;
}
own.ball.style.left = x + own.distance;
own.ball.style.top = y + own.distance;
}
}
}
function go()
{
load();
}
</script>
</head>
<body οnlοad="go()">
<div id='eye'>
</div>
</body>
</html>
Google eye 页面...大部分都是参考的..