Use JQuery to implement the same cool dynamic tile effect as win8 (sample code) _ jquery

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, I also hope that some friends who need it can refer to my personal suggestion that I like Microsoft's next-generation products very much, regardless of whether their products are mature or not, but it brings 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 p, fix the height (for example, 180px in this example), set the property overflow: hidden (hide the part beyond the border), and define an inner p in this p, set the property position: relative (relative layout ). In this inner layer p, we define an image. Note that the height of the image is the same as that of the outer layer p (such as 180px in this example), and then define a p to put the text, the height of the p is the same as the height of the outer p (for example, 180px, if you give a padding, the height is reduced accordingly to reach the height of the entire p is 180px ). The layout code is as follows:
Html:

The Code is as follows:

Use JQuery to achieve a cool dynamic tile effect like win8

Lin Yu

I personally said that I like Microsoft's next-generation products very much ......

Css:

The 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:

The 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 );
});
}

Here there are 7 parameters. id is the id of the inner p, that is, the p to be slide. d1 is the time of the inner p to stay after it slides up, px1 is the relative position of the inner p to move up. The default current position is 0px, and val1 is the time required for the inner p to move up, d2 is the time to stay after sliding p down, 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 sliding down.

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

The 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 files Download here.