Javascript-menu at the bottom of the Apple system-detailed analysis

(Bad. The previous analysis was incorrect. I have not asked this question !!!)

I saw it yesterday."Wonderful classroom"Of an Apple menuDemo. According to the "stock theorem" mentioned in ". I analyzed it myself.Code. As follows:

 

Come first!

 

Static:

 

 

When the mouse slides:

 

 

 

1. functions or effects to be implemented:

When the mouse slides close to an image, the image is gradually enlarged as the mouse moves toward it.

A. Yes"Zoom in"No"Increase". [Zoom in] is proportional, and [zoom in]: Not necessarily proportional. The following formula will be used.

B. The "proximity" here refers to the "Central Point" near the image ]. Closer to the image [central point], the larger the image is, the smaller the image is from the central point.【Small]It means that it is not smaller than the scaled-up value, but smaller than the original value.

The mouse is near the red dot, that is, the center of the image. The image becomes larger, farther away, and smaller.

Near Red points

Far away from the red dot

 

Ii. Function Analysis:

1.[Zoom in] Effect:

The original image width is multiplied by a ratio.,Assume that the original size of the image is wide.64pxHigh64px;Then I set this width64Multiply by a ratio (setX), then 64 * X is the enlarged value;

Add the original width with this zoom-in value, which is the post value of the zoom-in effect.

That is, the width of the enlarged image is 64 x + 64;

(The height is not considered here, becauseIMGThe label does not define the height. If only the width is defined, the width value changes and the height value also changes. So you only need to change the width value .)

 

2.How can we determine the distance between the mouse and the image center?

 

The mouse is a point in the middle of the web page, andImage Center]It is also a point. The distance between the mouse can be determined by the Length Value of the link between the two points.Image Center]The distance;

That is, the larger the length value indicates the distance between the mouse and the mouse.Image Center]Farther;,

The smaller the length value, the closer the mouse is to the image center;

Large Distance value (White: image, Red: center point, Yellow: Mouse, Blue: distance between the mouse and the center point, Black: Div)

 

Small distance value (White: image, Red: center point, Yellow: Mouse, Blue: distance between the mouse and the center point, Black: Div)

 

 

3.How do I obtain the value of the mouse distance from the center of the image? (That is, the length of the Blue Line (this is the key ))

The essence of 3.1 is to obtain the distance between any two points.

3.2 obtain method: create a right triangle first. Then the distance between two points is calculated through the [Hook muscle theorem] (because we can obtain the horizontal and vertical values through the js method. The diagonal line value is required. So you can turn to [Hook muscle theorem)

3.3 [Hook muscle theorem]: the sum of the squares of the two straight corner edges of a right triangle is equal to the square of the Oblique edges (X2 + y2 = Z2 );

X: length of a straight angle edge;

Y: the length of the other side;

Z: Oblique Edge length (that is, the distance between two points );

Therefore, to obtain the length value of Z, you must know the values of X and Y;

3.4 construct a right triangle

3.5 obtain the value of the mouse distance from the center of the image, that is, the length of the Blue Line in, that is, the value of Z.

3.5.1 first obtain the value of X :(OBJ:White image,Odiv:Orange Div,Oevent:Mouse, Black: web page)

(Gray + blue purple + green) Length value = obj. offsetleft + odiv. offsetleft + obj. offsetwidth/2;

(Red Length Value) = oevent. clientx;

X length value = (oimg. offsetleft + odiv. offsetleft + obj. offsetwidth/2)-(oevent. clientx );

 

3.5.2 obtain the value of Y again :(OBJ:White image,Odiv:Orange Div,Oevent:Mouse, Black: web page)

(Gray + blue purple + green) Length value = obj. offsettop + odiv. offsettop + obj. offsetheight/2;

(Red Length Value) = oevent. clienty;

Y length value = (oimg. offsettop + odiv. offsettop + obj. offsetheight/2)-(oevent. clienty );

 

3.5.3 [Hook muscle theorem]: the sum of the squares of the two straight corner sides of a right triangle is equal to the square of the oblique side (X2 + y2 = Z2 );\

(Math. Pow (......, 2) ball out of Square; math. SQRT (......) The square root can be obtained ;)

X2 = math. Pow (obj. offsetleft + odiv. offsetLeft-oEvent.clientX + obj. offsetwidth/2, 2 );

Y2 = math. Pow (obj. offsettop + odiv. offsetTop-oEvent.clientY + obj. offsetheight/2, 2 );

Z2 = math. Pow (obj. offsetleft + odiv. offsetLeft-oEvent.clientX + obj. offsetwidth/2, 2) +

Math. Pow (obj. offsettop + odiv. offsetTop-oEvent.clientY + obj. offsetheight/2, 2)

 

Z = math. SQRT (

Math. Pow (obj. offsetleft + odiv. offsetLeft-oEvent.clientX + obj. offsetwidth/2, 2) +

Math. Pow (obj. offsettop + odiv. offsetTop-oEvent.clientY + obj. offsetheight/2, 2)

)

Finally, the value of Z is obtained (that isThe value of the mouse distance from the center of the image, the length of the Blue Line)!!!

 

4.Enlarge the image range

The Z range above 4.1 should be

The minimum value is 0 (the mouse and the center point overlap, and the yellow and red colors overlap. There is no line between them. So it is 0 );

Maximum uncertainty; here we define a 200;

Therefore, the Z range is 0-200;

Math. Min (): returns smaller values of two numbers;

Z = math. Minute (z, 200 );

5.Formula for enlarging and downgrading images:

When Z is closer to 0, that is, the closer the mouse is to the image center, the image should be enlarged;

When Z is closer to 200, that is, the mouse is farther away from the image center, the image should be reduced;

Combined with the first formula: The image width = x * 64 + 64;

 

Formula: x = (IMAX-Z)/IMAX

Aimg [I]. width = (IMAX-Z)/IMAX) * 64 + 64;

 

6.Complete code

Document. onmousemove = Function  (EV ){  VaR Oevent = EV | Event;  VaR Odiv = Document. getelementbyid ('div1' );  VaR Aimg = odiv. getelementsbytagname ('img' );  VaR D = 0 ; VaR IMAX = 200 ;  VaR I = 0 ;  Function  Getdistance (OBJ ){  Return  Math. SQRT (math. Pow (obj. offsetleft + Odiv. offsetLeft-oEvent.clientX + obj. offsetwidth/2, 2) + math. Pow (obj. offsettop + odiv. offsetTop-oEvent.clientY + obj. offsetheight/2, 2) );}  For (I = 0; I <aimg. length; I ++ ) {D =Getdistance (aimg [I]); D = Math. Min (D, IMAX); aimg [I]. Width = (IMAX-d)/IMAX) * 64 + 64; }}; 

 <  Divid  = "Div1"  >      <  Ahref  = "Http://www.miaov.com /"  > <  Imgsrc  = "Images/1.png"  Width  = "64" Longdesc  = "Wonderful classroom"  ALT  = "Wonderful classroom"  Title  = "Wonderful classroom"   /> </  A  >      <  Ahref  = "Http://www.miaov.com /"  > <  Imgsrc  = "Images/2.png"  Width  = "64" Longdesc  = "Wonderful classroom"  ALT  = "Wonderful classroom"  Title  = "Wonderful classroom"   /> </  A  >      <  Ahref  = "Http://www.miaov.com /"  > <  Imgsrc  = "Images/3.png"  Width  = "64" Longdesc  = "Wonderful classroom"  ALT  = "Wonderful classroom"  Title  = "Wonderful classroom"   /> </  A  >      <  Ahref  = "Http://www.miaov.com /"  > <  Imgsrc  = "Images/4.png"  Width  = "64" Longdesc  = "Wonderful classroom"  ALT  = "Wonderful classroom"  Title  = "Wonderful classroom"   /> </  A  >      <  Ahref  = "Http://www.miaov.com /"  > <  Imgsrc  = "Images/5.png"  Width  = "64" Longdesc  = "Wonderful classroom"  ALT  = "Wonderful classroom"  Title  = "Wonderful classroom"   /> </  A  >  </  Div  >  Body {margin: 0px;} # div1 {text-align: center; bottom: 0px; position: relative; width: 500px; margin: 0 auto; Border: 1px solid red ;} # div1 IMG {border: none ;} 

 

Iii. Summary

1. To obtain the distance between any two points, use the [Hook muscle theorem] the sum of the squares of the two sides of a right triangle is equal to the square of the oblique side (X2 + y2 = Z2 );

2.(IMAX-Z)/IMAX, proportionalAlgorithm, Combined with addition or subtraction, division, multiplication;

Subtraction: the smaller the result, the larger the number;

addition: A number remains unchanged, the larger the other number, the larger the result; the smaller the reverse;

3.Is it necessary to abstract a basic shape, such as a point, line, face: triangle, square rectangle, circle, when there is an effect of image changes or when the shape changes, flattened quadrilateral. Then look for the law and observe the changes, those that are not changed, are familiar with or find the theorem formulas involved in the relevant instances. Slowly export the results.

DownloadDemo.

demo from " Wonderful class "