[Sanshi jQuery video tutorial] 03. Create a vertical Timeline (Timeline) and jquerytimeline

[Sanshi jQuery video tutorial] 03. Create a vertical Timeline (Timeline) and jquerytimeline

Video address: http://v.qq.com/page/g/ I /o/g0150rvi6io.html

 

Hello everyone, welcome to [sanshi jQuery video tutorial]. I am your old friend-sanshi.

Today, we will use basic HTML, CSS, and jQuery to implement a vertical timeline. Let's first look at the final product:

 

For simplicity, each node in the time table is replaced by an image, which may be the title-image-text in actual application.

Step 1: website directory

The website directory is very simple and contains three parts: the lesson3.html file, the lib directory, and the images directory.

Here, lesson3.html contains the most basic components of a page. Setting DOCTYPE correctly helps the page to be correctly rendered in modern browsers.

<! DOCTYPE html> 
 
The lib directory only contains the latest jQuery Library; the images directory contains nine images used.
 
Step 2: Page Structure
Add basic html tags to the page.
<! DOCTYPE html> 
　　
The page displays the following results:
 
 
Step 3: Time Label Style
Next we will create a Time Label style. In order to achieve a two-color circular background, we have made the following efforts:
 
 <style>body {background-color: #efefef;}#main {margin: 20px auto;}.timeline .year {background-color: #AFDCF8;width: 60px;height: 60px;border-radius: 30px;position: relative;margin: 0 auto 50px;}.timeline .year-inner {background-color: #46A4DA;width: 50px;height: 50px;text-align: center;line-height: 50px;color: #fff;border-radius: 25px;position: absolute;top: 50%;margin-top: -25px;left: 50%;margin-left: -25px;}.events img {width: 100%;}</style>
　　
The page displays the following results:

 
Step 4: display images left and right
To make the image display evenly between left and right, that is, one left, one right, and the other left and the other right, you need to clearly distinguish between the li tags with odd and even numbers, we use jQuery to complete this task:
<script src="lib/jquery.js"></script><script>$(function() {$('.timeline .events li:nth-child(2n)').addClass('alt');});</script>
JQuery sub-selector: nth-child (2n) is used to select an even number of items in the list and add the style class alt.
 
As defined in CSS, the image on both sides of the left and right occupies 40% of the width, that is, 20% of the width is reserved in the middle. A simple illustration is used:

Use the float style to display the image left and right. The specific CSS definition:
.timeline .events li {width: 40%;margin-bottom: 100px;border: solid 1px #AFDCF8;padding: 10px;border-radius: 5px;float: left;clear: left;}.timeline .events li.alt {float: right;clear: right;margin-top: 50px;margin-bottom: 50px;}
　　
Page effect:

 
Step 5: the vertical background line behind the Time Label
We can use an absolutely positioned div node to achieve this effect, but the simpler method is: after pseudo selector. First, let's look at the CSS definition:
.timeline {overflow: hidden;position: relative;}.timeline:after {content: "";position: absolute;width: 6px;height: 100%;background-color: #AFDCF8;top: 0;left: 50%;margin-left: -3px;}
: After pseudo selector is used to insert new content after the content of an element:

  

 
   
Content defines the new content to be inserted. Here we do not need to insert any text content, so leave it blank.
 
   
The new content is definitely located, just like the normal div node.
 
   
To align the vertical background line horizontally, we also used the top: 50% + margin-top tips mentioned above.

  
 
Page effect:
　
Step 6: connect the vertical background line to the image
Using a pseudo selector like this, we can easily define a connection line relative to each li node:
.timeline .events li {width: 40%;margin-bottom: 100px;border: solid 1px #AFDCF8;padding: 10px;border-radius: 5px;float: left;clear: left;position: relative;}.timeline .events li:after {content: "";position: absolute;top: 30px;left: 100%;width: 25%;height: 6px;background-color: #AFDCF8;}
 
Notes:

  

 
   
Left: 100% indicates that the connection line is displayed near the right of the icon.
 
   
Width: 25% defines the width of the connection line, which occupies the distance from the right side of the image to the vertical background line.

  
A huge question number?Why is it 25% instead of other values?
In fact, this is carefully arranged:
Recall that the image occupies 40% of the width, so the connection line should occupy 10% of the entire width = (100%-40% * 2)/2, which is obvious!
However, the absolute position (position: absolute) of li: after is relative to the first non-static parent node, where the parent node is. timeline. events li itself, so the width of the connection line relative to li:
40% * x = 10% = (100%-40% * 2)/2, which can be calculated as x = 25%
 
====
Suppose that the width of the image CSS is set to 45%, then the width of li: after should be (100%-45% * 2)/2)/45% = 11.1%
 
Page effect:

 
 
Step 7: Customize the box-sizing Model)
Although we vowed that the 25% is carefully arranged, the actual effect is far different, and the connection line width is significantly wider.
If this is the actual width of a piece, we will find that the actual width of the image is 40%, which does not include the padding and border )!
 
At this time, we need to reset the box-sizing of all elements on the page, from the default value of content-box to border-box, and this practice is also recommended.
Many of the highlighted CSS frameworks (including the popular BootStrap) use this rule as the default style:
* {    box-sizing: border-box;}
 
The following compares the differences between the two rules:

  

 
   
Content-box: the width and height set for the element do not contain the padding and border
 
   
Border-box: Specifies the width and height of the element, including the padding and border.

  
 
Page effect:
　　
　　
Step 8: complete CSS code
Adding a connection line to the image on the right is also easy. Let's take a look at the complete CSS code:
* {box-sizing: border-box;}body {background-color: #efefef;}#main {margin: 20px auto;}.timeline {overflow: hidden;position: relative;}.timeline:after {content: "";position: absolute;width: 6px;height: 100%;background-color: #AFDCF8;top: 0;left: 50%;margin-left: -3px;z-index: 0;}.timeline .year {background-color: #AFDCF8;width: 60px;height: 60px;border-radius: 30px;position: relative;margin: 0 auto 50px;clear: both;z-index: 1;}.timeline .year-inner {background-color: #46A4DA;width: 50px;height: 50px;text-align: center;line-height: 50px;color: #fff;border-radius: 25px;position: absolute;top: 50%;margin-top: -25px;left: 50%;margin-left: -25px;}.timeline .events {list-style-type: none;padding: 0;margin: 0;clear: both;}.timeline .events li {width: 40%;margin-bottom: 100px;border: solid 1px #AFDCF8;padding: 10px;border-radius: 5px;float: left;clear: left;position: relative;}.timeline .events li:after {content: "";position: absolute;top: 30px;left: 100%;width: 25%;  /* 10% = 1 * 40% * 25% */height: 6px;background-color: #AFDCF8;}.timeline .events li.alt {float: right;clear: right;margin-top: 50px;margin-bottom: 50px;}.timeline .events li.alt:before {content: "";position: absolute;top: 30px;left: -25%;width: 25%;height: 6px;background-color: #AFDCF8;}.events img {width: 100%;}
　　
 
The final page effect:

 
Source code and video download
Find the source code and video in the video! Sanshi!