googleEye 的简单实现

来源：互联网发布：康有为和孙中山知乎编辑：程序博客网时间：2024/06/09 17:30

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>