googleEye 的简单实现

最新推荐文章于 2025-04-30 13:05:54 发布

原创最新推荐文章于 2025-04-30 13:05:54 发布 · 660 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #class #layer #float #null

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的谷歌眼效果实现方案，通过HTML、CSS和JavaScript技术，实现了页面上的眼睛跟随鼠标移动的效果。该方案包括两个重叠的图像元素，每个图像都根据鼠标的位置进行动态调整。

googleEye 简单实现

<html>
	<head>
		<title>googleeyel.html</title>

		<style type="text/css">
			body{
				width:100%;
				height:100%;
			}
			div {
				float: left;
			}
			
			.layer {
				background: url(image/da.jpg) no-repeat;
				width: 303px;
				height: 302px;
			}
			
			#layer1{
				position: absolute;
				top:100px;
				left:0px;
			}
			#layer2{
			position: absolute;
			top:100px;
			left:350px;
			}
			img{
				position: relative;
				top:130px;
				left:130px;
			}
		</style>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			function $$(tag){
				return document.getElementsByTagName(tag)
				
			}var div = new Array();
		function getCentrePoint(){		
				div = $$("div");
				if(div[0].currentStyle !=null){

					var centrePoint1X = parseInt(imgs[0].currentStyle.left);
					var centrePoint1Y = parseInt(imgs[0].currentStyle.top);
					var centrePoint2X = parseInt(imgs[1].currentStyle.left);
					var centrePoint2Y = parseInt(imgs[1].currentStyle.top);
					
				}else{
					var centrePoint1X = parseInt(document.defaultView.getComputedStyle(div[0]).left);
					var centrePoint1Y = parseInt(document.defaultView.getComputedStyle(div[0]).top);
					var centrePoint2X = parseInt(document.defaultView.getComputedStyle(div[1]).left);
					var centrePoint2Y =	parseInt(document.defaultView.getComputedStyle(div[1]).top);
				}
				var centrePoint= [centrePoint1X+150,centrePoint1Y+150,centrePoint2X+150,centrePoint2Y+150];
				//alert(""+centrePoint1X +"px" + centrePoint1Y +"px"+centrePoint2X +"px"+centrePoint2Y +"px");
				return centrePoint;
			}
			
			function eyeChange(event){
			//	alert(111+"");
				var imgs = $$("img");
				var centrePoints = getCentrePoint();
				var mouseX = parseInt(event.clientX);
				var mouseY = parseInt(event.clientY);
				var range1 =Math.sqrt(Math.pow((mouseX - centrePoints[0]),2) +Math.pow((mouseY - centrePoints[1]),2));//鼠标距离第一个园圆心的距离
				var range2 =Math.sqrt(Math.pow(mouseX - centrePoints[2],2) +Math.pow(mouseY - centrePoints[3],2));//鼠标距离第二个园圆心的距离
				//alert(range1+"dfasdfasd" +range2);
				var rangeHeight = centrePoints[1]-mouseY;
				imgs[0].style.top =150- 150*rangeHeight/range1+"px";
				
				imgs[0].style.left = 150+(mouseX -centrePoints[0])*150/range1+"px";
				
				imgs[1].style.top =150- 150*rangeHeight/range2+"px";
				imgs[1].style.left =150- (centrePoints[2]-mouseX)*150/range2+"px";
			}
		</script>
	</head>

	<body onmousemove = "eyeChange(event)">
		<div id = "layer1" class = "layer"><img src="image/xiao.jpg"/></div><div id = "layer2" class = "layer"><img src="image/xiao.jpg"/></div>
	</body>
</html>