Use JQuery to achieve a cool dynamic tile effect like win8

I believe that you like this interface and it is just like its dynamic tile. Today, I learned how to use JQuery to simulate this effect on the web page, and I will post it to you. Although it is a very low-level technology, but also hope to have friends in need can refer to the next

I personally said that I like Microsoft's next-generation products very much. No matter whether their products are mature or not, they bring new products. The so-called brand new refers to the user experience. Apple's success over the years has made all products imitate its interface, including Android, without knowing how everyone feels, anyway, I have made Aesthetic Fatigue on these rounded rectangles (fans of Apple and Android do not need to spray them. Here I only comment on the interface. In fact, Microsoft still has a gap in terms of the whole ), when wp was launched, I immediately liked the Metro-style products. Today, wp8 and win8 are becoming more and more mature.

It is not easy to write. You are welcome to read the official comments and criticize them. Please bypass.

Speak nonsense and start with the question.The basic idea is:Define an outer div, fix the height (for example, 180px in this example), set the property overflow: hidden (hide the part beyond the border), and define an inner div in this div, set the property position: relative (relative layout ). In this inner div, we define an image. Note that the height of the image is the same as that of the outer div (such as 180px in this example), and then define a div to put the text, the height of the div is the same as the height of the outer div (for example, if you give a padding, the height is reduced accordingly to reach the height of the entire div which is 180px ). The layout code is as follows:
Html:

Copy codeThe Code is as follows:
<Div id = "outside">
<Div id = "inside">

<Div id = "text">
<Span> Use JQuery to achieve the same cool dynamic tile effect as win8 </span>
<P> Lin Yu </p>
<P> I personally said that I really like Microsoft's next-generation products ...... </P>
</Div>
</Div>
</Div>

Css:

Copy codeThe Code is as follows:
# Outside
{
Height: 180px;
Overflow: hidden;
}
# Inside
{
Position: relative;
}
# Text
{
Width: 160px;
Height: 160px;
Background: # 0000ff;
Padding: 10px;
Color: # fff;
}

The rest is about JQuery. First, let's take a look at this "dynamic tile" action: first show an image, then slide up to show the text, stay for a while, and then slide down to show the picture, so that the cycle. First, we define a function:

Copy codeThe Code is as follows:
Function go (id, d1, px1, val1, d2, px2, val2 ){
$ (Id). delay (d1 );
$ (Id). animate ({bottom: px1}, val1, function (){
$ (Id). delay (d2 );
$ (Id). animate ({bottom: px2}, val2 );
});
}

There are 7 parameters. id is the id of the inner div, that is, the div to be slide. d1 is the time of the inner div to stay after it slides up, px1 is the relative position of the inner div to move up. The default current position is 0px, and val1 is the time required for the inner div to complete the move up, d2 is the time of moving down the div, px2 is the relative position of sliding down, here it is still the original position of 0 PX, val2 is the time required to complete the sliding down.

Then we set a timer when page loading is complete to execute the go function we defined:

Copy codeThe Code is as follows:
$ (Function (){
Timer1 = setInterval (function (){
Go ("# inside", 1500, "180px", 1200,100 0, "0px", 2000 );
},3000 );
});

The parameters here can be modified as needed. Here we let the timer execute the go function every 3 seconds.
The source code is basically pasted out. you can slam the shoes that need source filesDownload here.