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>