Various centers, all kinds of weak.

Today, the top adult called to the client company stationed in the field, has been busy to re-do the company's official website, there is a place and card a large half day. The Big Boss's requirement is to achieve an animated effect somewhere on the page, with three images appearing from below. How to "take" from below? The following effect is achieved

1. First, three images should be absolutely positioned to set the parent element to relative positioning. and set the bottom to a negative number for the height of the picture, and set the parent element's overflow property to hidden. The left value of each picture is determined according to the length of the desired overlap. It is worth saying that, in order for the middle picture to appear at the top, it should be set to a higher value of Z-index oh.

2. And let them appear in the parent element, is to set their bottom to 0 (Z here set three new class, define the new bottom value). To animate, you can set the Transition property in the new class to define the element properties for the transition and the transition time in that attribute.

3. The last step is to write JS. Before this, I was thinking about what to use to trigger the event, and at first I used the MouseOver function, which was displayed in turn when the mouse was over the parent element. But by the top of the adult no, he let me change to when the scroll bar to a certain height, and then appear the picture animation effect. To achieve this, first, get the parent element's distance to the top of the body, and then get the height of the current scrollbar top to the top of the page. When they are equal, or the latter is greater than or equal to the former, add a new set of styles (AddClass) to the three pictures.

The key statement:

var mydiv=$ (". Div7");//div7 is the parent element
var myheight=mydiv.offset (). Top;
var myscroll=$ (document). ScrollTop ();
if (myscroll=myheight) {}

This is over, anyway, and finally learned something. But Scrolltop,offset and so on still give me a headache. Hope that later study can become better.

After writing only found, irrelevant, center half word didn't mention. Well said center, in fact, I also very headache, the current comparison will be used, the P tag set row height and height equal, to achieve vertical center. Set the specific length and width of the block-level elements, with margin:auto, and achieve horizontal centering. Well, there are some elements that are converted, such as the parent element display as table, and the child element set to Display:table-cell And then you can use Vertical-align (middle) or text-align (center).

Various centers, all kinds of weak.