The bottom menu _javascript techniques of Apple system based on JavaScript implementation

(Bad Idea, previously released is the wrong analysis.) Now, this one's not asking,!!!. ）

Yesterday I saw a demo of an Apple menu in the "Wonderful Taste class". According to the "Pythagorean theorem" mentioned inside. I analyzed the code myself. As follows:

Let's start with an effect chart!

At rest:

When the mouse is sliding:

The function or effect to be real now:

As the mouse slides close to one of the pictures, the picture is magnified as the mouse approaches it.

A. "Amplification" is not "bigger". "Enlarge" is equal proportion, and "bigger": not necessarily equal proportion. This is reflected in the formula that follows.

B. Here "near": Refers to the "center point" near the picture. From the picture "center Point" closer, the picture larger, away from the center point, it becomes smaller, of course, here, "small" is relative to the enlargement of the smaller, will not be smaller than the original value is smaller.

The mouse is near the red dot that is the picture "center Point", the picture becomes big, far away, becomes small

Close to the red dot

　　　　　　　　

Stay away from the red dots

Second, functional analysis:

1. "Enlarge" effect:

The original picture width times a proportional number, assuming that the original size of the picture is 64PX high 64PX; then I multiply this 64 by a proportional number (which is first set to X), so 64*x is the magnification value;

With this amplification value plus the original width, is the "magnification" effect of the back value.

namely: enlarge the picture width value = 64*x + 64;

(The height is not considered here, because in the IMG tag, no height is defined, only width is defined, then the width value changes and the height value changes together.) So you just need to change the width of the value, that's all. ）

2. How to judge the distance from the picture "center Point" of the mouse?

The mouse in the middle of the Web page is a point, and the picture "center Point" is also a point, through these two points between the length of the value of the size of the line can be judged by the distance of the picture "center Point" of the Near and far;

That is: the greater the length of the value: indicating the mouse distance from the picture "center Point" the farther;

The smaller the value of this length: indicating the mouse distance from the picture "center point" nearer;

Distance value Large (white: Picture, Red: Center point, yellow: mouse, Blue: Mouse and center point distance, Black: DIV)

Distance value Small (white: Picture, Red: Center point, yellow: mouse, Blue: Mouse and center point distance, Black: DIV)

3. How to get the mouse distance picture "center Point" value? (That is, the length of the blue line in the above figure (this is the point))

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

3.2 Get the method: Build a right-angled triangle first. Then, the distance between the two points is calculated by the "Hook muscle theorem" (because we can get horizontal and vertical values through the JS method). The value that exactly requires a slash. So you can turn to the "Hook muscle theorem".

3.3 "Hook muscle theorem": The square of the two right-angled sides of a right triangle equals the square of the hypotenuse (X2+Y2=Z2);

x: A right angle side length;

Y: Another right angle side length;

Z: hypotenuse length (i.e. distance value between two points);

So to get the length value of z, you need to know how much x and Y are.

3.4 Building a right-angled triangle

3.5 Find the mouse distance to the picture "center Point" of the value, that is, the length of the blue line in the above figure, that is, the value of Z

3.5.1 first get the value of x: (obj: White picture, Odiv: Orange Div, oevent: mouse, Black: Web page)

(Gray + blue purple + green) The length value = obj.offsetleft + Odiv.offsetleft + obj.offsetwidth/2;

(red length value) = Oevent.clientx;

The length value of x = (OIMG.OFFSETLEFT+ODIV.OFFSETLEFT+OBJ.OFFSETWIDTH/2)-(OEVENT.CLIENTX);

3.5.2 The value of y: (obj: White picture, Odiv: Orange Div, oevent: mouse, Black: Web page)

(Gray + blue purple + green) The length value = obj.offsettop + Odiv.offsettop + obj.offsetheight/2;

(red length value) = Oevent.clienty;

The length value of y = (OIMG.OFFSETTOP+ODIV.OFFSETTOP+OBJ.OFFSETHEIGHT/2)-(Oevent.clienty);

3.5.3 "Hook muscle theorem": The square of the two right-angled sides of a right triangle equals the square of the hypotenuse (X2+Y2=Z2);

(Math.pow (..., 2) can square the ball; Math.sqrt (...) ) can be used to find the square root;

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 got the value of Z (that is, the mouse distance from the picture "center Point" value, the length of the blue Line in the figure)!!!

4 　　. The scope of the picture magnification

4.1 The range of z above should be

The smallest 0 (mouse and "center point" coincide, yellow and red overlap, there is no connection between. So is 0);

Maximum uncertainty; Here we set a 200;

Therefore the range of z is 0-200;

Math.min (): Returns the smaller of two digits;

z = math.min (z,200);

5. Picture enlarge and shrink the formula:

When Z is closer to 0, the closer the mouse is to the "center point" of the picture, the picture should be enlarged;

When the z is closer to 200, that is, the farther away from the picture "center Point", the picture should be reduced;

Combined with the 1th formula: the width of the picture value = X *64+ 64;

Draw the 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/" ></a> <ahref= "http://www.miaov.com/" ></a> <ahref=
  "http://www.miaov.com/" >< Imgsrc= "Images/3.png" width= "longdesc=" "Wonderful Taste Class" alt= "Wonderful Taste Class" title= "Wonderful taste Classroom"/></a>
  <ahref= "http://" www.miaov.com/"></a>
  <ahref= "http://www.miaov.com/" ></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;}

Third, summary

1. To obtain the distance between any two points, the square of the two right sides of the right triangle with the "hook muscle theorem" is equal to the square of the hypotenuse (X2+Y2=Z2);

2. (imax-z)/imax, and proportional algorithm, combined with addition or subtraction, division, multiplication;

Subtraction: One number is unchanged, the other number is larger, the result is smaller;

Addition: One number does not change, the other number becomes larger, the result is larger;

3. The effect of changes in the picture, or are said to be the shape of the change effect, should be first abstracted into the basic shape, such as point, line, surface: triangular, square rectangular, round, flat-shaped quadrilateral. Then look for the law, more to observe those changes, those who have not changed, familiar with or find the relevant examples of the theorem involved in the formula. Slowly deduce the effect.

The above is the entire content of this article, I hope to help you, thank you for the support of cloud habitat community!