烂版Google Eye

最新推荐文章于 2020-10-08 23:23:23 发布

accpXuDJiang

最新推荐文章于 2020-10-08 23:23:23 发布

阅读量536

点赞数

分类专栏： js随笔文章标签： google function border div table class

本文链接：https://blog.csdn.net/accpXuDJiang/article/details/7884343

版权

js随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

▲

<!DOCTYPE html>
<html οnmοusemοve="mouseXY(event)">
  <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">

	<style type="text/css">
	
	#left,#right{
	width:190px;
	height:190px;
	background:url('image/roll.jpg') no-repeat;
	}
	</style>
	<script type="text/javascript">
	var x,y;
	
	var x1=580; var y1=165;
	var x2=770; var y2=165;
	var d=45;
	var xx1,yy1;
	var xx2,yy2;
	function XY(p,b,bb,d,dd){
		$(p).style.position="absolute";
		$(p).style.left=bb+b+"px";
		$(p).style.top=dd+d-60+"px";	
	}

	function mouseXY(event)
		{
		x=event.screenX;
		y=event.screenY;
			var k1=(y-y1)/(x-x1);
			var a1=Math.sqrt((d*d)/(x1*x1+k1*k1*y1*y1));
			if(x>580&&(y>110||y<210)){	xx1=a1*x1;yy1=a1*k1*y1;
			XY("leftP",xx1,x1,yy1,y1);}
			else if((x<580||x==580)&&(y>110||y<210)){xx1=-a1*x1;yy1=-a1*k1*y1;
			XY("leftP",xx1,x1,yy1,y1);}
			else {
				$("leftP").style.position="absolute";
				$("leftP").style.left=x+"px";
				$("leftP").style.top=y+"px";
			}
			
			var k2=(y-y2)/(x-x2);
			var a2=Math.sqrt((d*d)/(x2*x1+k2*k2*y2*y2));
			if(x>770&&(y>110||y<210)){xx2=a2*x2;yy2=a2*k2*y2;
			XY("rightP",xx2,x2,yy2,y2);}
			else if((x<770||x==770)&&(y>110||y<210)){xx2=-a2*x2;yy2=-a2*k2*y2;
			XY("rightP",xx2,x2,yy2,y2);}
			else{
				$("rightP").style.position="absolute";
				$("rightP").style.left=x+"px";
				$("rightP").style.top=y+"px";
			}	
		}
		function $(id){
		return document.getElementById(id);
		}

	</script>
  </head>
  <body >
  	<table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:20px">
  		<tr>
  			<td >
  				<div id="left" >
				<img src="image/spot.jpg" class="leftSpot" id="leftP"/>
				</div>
  			</td>
  			<td>
  				<div id="right">
				<img src="image/spot.jpg"class="rightSpot" id="rightP"/>
				</div>
  			</td>
  		</tr>
  	</table>
  </body>
</html>