Use JQuery to achieve the same cool dynamic tile effect as win8 (sample code)

Use JQuery to achieve the same cool dynamic tile effect as win8 (sample code)_jquery

WBOY

Release： 2016-05-16 17:29:00

Original

1424 people have browsed it

I personally like Microsoft's new generation of products very much. Regardless of whether the product is mature or not, it brings brand-new products. The so-called brand new refers to the user experience. Apple’s success in recent years has caused all products to imitate its interface, including Android. I don’t know how you feel. Anyway, I am tired of these rounded rectangles ( Fans of Apple and Android, please don’t complain, this is just an evaluation of the interface. In fact, overall, Microsoft still has a gap). The launch of wp made my eyes shine, and I immediately fell in love with Metro-style products. Today wp8 and win8 are starting to become more and more mature.

If the writing is not good, you are welcome to correct and criticize me, but you are not welcome to criticize me for no reason. God, please take a detour.

Stop talking nonsense and get to the point. The basic idea is: Define an outer div with a fixed height (such as 180px in this example) and set the attribute overflow:hidden (hide the part beyond the border), and then in this div Define an inner div inside and set the attribute position:relative (relative layout). In this inner div, we define a picture, and be careful to set its height to be the same as the height of the outer div (such as 180px in this example), and then define a div to put text. The height of this div is also the same as the height of the outer div. The height is the same (such as 180px in this example, if you give a padding, the height will be reduced accordingly to achieve a height of 180px for the entire div). The layout code is as follows
html:

Copy code The code is as follows :

;/div>

css:

Copy the code

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 JQuery. First, understand the action of this "dynamic tile": first display a picture, then slide up to display text, stay for a while, then slide down to display the picture, and so on. Let’s first define a function: 

Copy the code

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 7 parameters, id is the ID of the inner div, which is the div to be slid, d1 is the time the inner div stays after sliding up, px1 is the relative position of the inner div to slide up, the default current position is 0px, val1 is The time it takes for the inner div to complete the upward sliding action. d2 is the time it stays after sliding the div downwards. px2 is the relative position of the downward sliding. Here, the original position is still 0px, and val2 is the time it takes to complete the downward sliding. required time. 


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

Copy code

The code is as follows:

$(function () {
 timer1 = setInterval(function () {
 go("#inside", 1500, "180px", 1200, 1000, "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 has basically been posted. If you need the source file, you can click here to download .