javascript--Apple System Bottom Menu--detailed analysis

SOURCE Download:http://pan.baidu.com/s/1hqvJJA8

Code Source: This demo comes from "Wonderful classroom"

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

Let's have a first!

At rest:

When the mouse is sliding:

First, to the actual function or effect:

　　When the mouse is sliding close to one of the pictures, the picture zooms in as the mouse approaches it.

A. is "enlarge" not "grow". "Magnification" is proportional, and "bigger": not necessarily proportional. This is reflected in the formulas that follow.

B. The "proximity" here: refers to the "center point" near the picture. The closer the picture "center Point" is, the larger the picture, the farther away from the center point, the smaller it is, of course, the smaller it is relative to the magnification, and not smaller than the original value.

The mouse is close to the red dot that is the "center point" of the picture, the picture becomes bigger, far away, becomes smaller

Close to the red dot

Stay away from the red dot

Second, functional analysis:

1. "Zoom In" effect :

The original image width multiplied by a scale number, assuming the original size of the picture is 64PX high 64PX; then I multiply the width 64 by a scale number (which is set to X first), then the 64*x is the magnification value;

With this magnification, the previous width is the value of the "zoom in" effect.

That is: the width of the enlarged image value = 64*x + 64;

(The height is not considered here, because in the IMG tag, the height is undefined and the width is defined, then the width value changes and the height value changes together.) So we just need to change the width of the value, it's OK. ）

2. How to determine the distance between the mouse and the "center point" of the picture?

The mouse in the middle of the Web page is a point, and the picture "center Point" is also a point, through the two points between the length of the line value of the size, you can determine the mouse distance picture "center Point" near;

That is, the larger the length value: the farther away the mouse is from the "center point" of the picture ;

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

　　　　

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

　　　　

　　　　

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

　　　　

　　　　

3. How do I get the value of the mouse distance from the image "center point"? ( that is, the length of the Middle Blue Line (this is the focus))

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

3.2 Get the method: Build a right triangle first. The distance value between two points is calculated by the "hook-muscle theorem" (because we can get the horizontal and vertical values by JS method). The value of the slash is exactly required. So you can ask for the "hook-and-muscle theorem".

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

x: A right angle edge length;

Y: Another right angle side length;

Z: The length of the hypotenuse (that is, the distance between two points);

So to get the length value of z, you need to know what X and Y are;

3.4 Building a right triangle

　　　　3.5 Find the value of the mouse distance to the "center point" of the picture, that is, the length of the blue Line, that is, the value of Z

3.5.1 first gets the value of x: (obj: white picture, odiv: Orange Div, oevent: mouse, Black: Web page)

Length value (Gray + blue violet + green) = Obj.offsetleft + Odiv.offsetleft + obj.offsetwidth/2;

(length value of red) = Oevent.clientx;

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

　　　　　　　　

3.5.2 again gets the value of y: (obj: white picture, odiv: Orange Div, oevent: mouse, Black: Web page)

Length value (Gray + blue violet + green) = Obj.offsettop + Odiv.offsettop + obj.offsetheight/2;

(length value of red) = 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 two right-angled sides of right triangle equals the square of the hypotenuse (X2+Y2=Z2);

(Math.pow (..., 2) can ball out of square; Math.sqrt (...) ) 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 get the value of Z (that is , the mouse distance from the image "center point" value, the length of the Blue Line )!!!

4. enlarge the range of the picture

4.1 The range of z above should be

Minimum 0 (Mouse and center point coincident, Yellow and red coincide, no connection between.) So is 0);

Maximum uncertainty; Here we set a 200;

Therefore the range of the z 0-200;

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

z = math.min (z,200);

5. Zoom-In and zoom out formula:

When the z closer to 0, that is, the mouse closer to the picture "center Point", the picture should be enlarged;

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

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

Derived 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=" "Miao" alt= "Miao class" title= "Miao taste Classroom"/></a> <ahref=    "http// www.miaov.com/"></a> "    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;}

Iii. Summary

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

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

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

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

3. There are changes in the effect of the picture, or are said to be the shape of the effect of the time, is not the first to abstract into a basic shape, such as points, lines, polygons: triangles, square rectangle, round, flat-shaped quadrilateral. Then look for patterns, and observe those changes, those that have not changed, are familiar with or find relevant examples of the theorem involved in the formula. Slowly deduce the effect.

　　　　　　

javascript--Apple System Bottom Menu--detailed analysis (RPM)