First, the function
function Show (n) { return n*2;} Alert (Show (2)); // 4alert (Show (3)); // 6alert (Show (4)); // 8
Second, the Pythagorean theorem
1. It can realize the application of two-point coordinate seeking distance
2. The square and root of JS
Math.pow (2,3) //2 cubic math.pow (3,2) //3 squared 9) //3 alert (math.sqrt (Math.pow) (// This is the Pythagorean theorem
Third, use the Pythagorean theorem to calculate the distance between two points, so as to achieve similar Apple menu case
The principle is to detect the position of the mouse, and then calculate the distance between the mouse and the picture, the most recent picture, the furthest distance from the picture the smallest
<style>*{margin:0;padding:0;}#div1{width:100%;position:Absolute;Bottom:0;text-align:Center;}img{width:64px;}</style><Script>window.onload= function(){ varAinput=document.getElementsByTagName ('input'); varOdiv=document.getElementById ('Div1'); varaimg=Odiv.getelementsbytagname ('img'); Document.onmousemove= function(EV) {varEV=EV||window.event; for(varI=0; I<Aimg.length;i++){ //Distance from the left edge of the page + half of the width of each picture is not added to the distance from the left edge of the page, because the width is hundred percent, the distance is zero varx=Aimg[i].offsetleft+Aimg[i].offsetwidth/2; //The distance of the image from the top edge of the page + half the width of each picture plus the distance of the div from the top edge of the page vary=Aimg[i].offsettop+Aimg[i].offsetheight/2 + odiv.offsettop; varb=Ev.clientx-x;//The position of the mouse coordinates minus the position of the center point coordinate of the picture horizontal edge vara=Ev.clienty-y;//The position of the mouse coordinates minus the vertical edge of the position of the picture Center point coordinate varC=math.sqrt (Math.pow (b,2) +Math.pow (A,2));//know two right angles to get the length of the third side, namely the Pythagorean theorem //The closer the mouse is to the picture, the greater the value . var Scale= 1 -C/300; if( scale<0.5) { scale= 0.5; } ainput[i].value=Scale ; Aimg[i].style.width= Scale* - + 'px'; Aimg[i].style.height= Scale* - + 'px'; } }; };</Script></Head><Body> <inputtype= "text"> <inputtype= "text"> <inputtype= "text"> <inputtype= "text"> <inputtype= "text"> <DivID= "Div1"> <imgsrc= "Img/1.png"> <imgsrc= "Img/2.png"> <imgsrc= "Img/3.png"> <imgsrc= "Img/4.png"> <imgsrc= "Img/5.png"> </Div></Body>
The function and Pythagorean theorem of JavaScript mathematical disclosure