Google eye HTML

最新推荐文章于 2024-08-15 11:09:11 发布

望梅能否止渴

最新推荐文章于 2024-08-15 11:09:11 发布

阅读量350

点赞数

文章标签： google function stylesheet html div go

<!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 页面...大部分都是参考的..

望梅能否止渴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Google eye HTML

GoogleEye.html --> var eye1; var eye2; function load() { eye1 = new Eye(); eye1.init(); eye2 = new Eye(); eye2.init(); eye2.circle.style.border = "1px solid y
复制链接

扫一扫