JQuery + HTML5 + CSS3 timeline plug-in, supporting responsive layout, jqueryhtml5

JQuery + HTML5 + CSS3 timeline plug-in, supporting responsive layout, jqueryhtml5

 

I. Preview

(Figure 1)

 

(Figure 2)

Note:

Figure 1 shows the display effect when the browser width pixel is greater than 560px, and Figure 2 shows the display effect when the browser width pixel is less than 560px. The Media Query of CSS3 is used.

In addition, CSS 3 is also used for the circle, rounded corner, and triangle on the page. These basic styles and effects will not be described in this article. If you are not familiar with shoes, you can search and learn online.

The presentation content of each time node on the page provides three display styles: The display style of multiple images, the display style of a single image, and the display style without images. These can be changed as needed.

Ii. Analyze the page layout

The layout of the page is mainly to use relative positioning for the outer container, and use absolute positioning for the elements in the container. For more information, see

According to the analysis on the image, the layout of the timeline plug-in can be displayed.

After the layout is complete, we can add the content we want to display. To make the page not so monotonous, you can use the animate function of JQuery to add some effects. For example, you can slide the left node of the page into the page from the left side, and the right node slides into the page from the right side of the page. The code is simple and will be posted later.

Iii. Add a rolling trigger event mechanism to dynamically load time nodes

When there are many time nodes, for example, a company's development history and important notes are unlikely to have only three or five pieces of information. Over time, the more events worth recording, the more. If all the information is displayed on the page at one time, the page display efficiency may be affected, and the user experience will not be good.

Therefore, you can use the trigger rolling event mechanism to load a fixed number of items each time. This is the same as implementing paging. But our trigger condition is rolling.

Note:

1. when loading a fixed number for the first time, assume that five records are loaded each time. If no scroll bar appears after loading five records for the first time, call the query method again to continue loading, until the scroll bar appears (otherwise, after loading five items for the first time, the scroll event cannot be triggered after the scroll bar is not displayed, and the records after the query cannot be continued ).

2. trigger a rolling event. It cannot be triggered as long as the rolling event is triggered. Otherwise, the program will always trigger the loading method, and the page may fail to respond due to frequent requests. Solution: You can trigger the loading method when the scroll bar scrolls to the bottom of the page.

See the code for specific determination.

CSS code

. Timeline-container {width: 100%;/* height: auto ;*/}. timeline {width: 100%; margin: auto; position: relative; height: auto; padding: 30px 0px 0px 0px ;}. timeline>. timeline-block {width: 50% ;}. timeline-block>. popover {max-width: 70% ;}. timeline>. timeline-block-odd {float: left ;}. timeline>. timeline-block-even {float: right ;}. timeline-block-odd>. timeline-content {display: block; position: relative; float: Right; margin-right: 50px ;}. timeline-block-even>. timeline-content {display: block; float: left; position: relative; margin-left: 50px ;}. timeline-content>. arrow {top: 20px! Important; background: # f7f7f7 ;}. timeline-content>. popover-content {max-height: 240px; overflow-y: auto; color: #696969; font-size: 11px ;}. timeline-content>. popover-footer {padding: 8px 14px; margin: 0px; font-size: 11px; border-top: 1px dotted # b9b9b9; color: # 4b4b4b; background: # F2F2F2 ;}. timeline img {border: 1px solid # dddddd; padding: 2px ;}. timeline-img {width: 50px; height: 50px;-webkit-border-radius: 25px;-moz-border-radius: 25px;-o-border-radius: 25px; border-radius: 25px; border: 3px solid # A3E3E8; margin: auto; background: # ffffff; position: absolute; z-index: 9; left: 50%; margin-left: -25px; background: url (.. /.. /indexImg/greeneye.jpg); background-size: cover ;}. timeline-line {width: 4px; height: 100%; background: # aef0f5; position: absolute; z-index: 8; left: 50%; border-left: 1px solid # aef0f5; border-right: 1px solid # ffffff; margin-left:-2px; margin-top:-30px ;}. timeline-block-odd>. popover. left>. arrow: after {right: 2px; border-left-color: # F7F7F7 ;}. timeline-block-even>. popover. right>. arrow: after {left: 2px; border-right-color: # F7F7F7;}/** mediaquery query style **/@ media screen and (max-width: 560px ){. timeline {width: 100%; position: relative; height: auto; padding: 30px 0px 0px 0px ;}. timeline>. timeline-block {width: 100% ;}. timeline>. timeline-block-odd {float: right ;}. timeline-block-odd>. timeline-content {display: block; position: relative; float: left; margin-left: 75px ;}. timeline-block-even>. timeline-content {display: block; position: relative; float: left; margin-left: 75px ;}. timeline-block-odd>. popover>. arrow ,. timeline-block-odd>. popover>. arrow: after {position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid ;}. timeline-block-odd>. popover. left>. arrow {left:-21px; bottom:-10px; content: ""; border-left-width: 0; border-right-color: #999; border-width: 10px ;}. timeline-block-odd>. popover. left>. arrow: after {left: 1px; right: 1px; bottom:-10px; content: ""; border-left-width: 0; border-right-color: # fff ;}. timeline-block-odd>. popover>. arrow: after {content: ""; border-width: 10px ;}. timeline-img {width: 50px; height: 50px; margin: auto; background: # ffffff;-webkit-border-radius: 25px;-moz-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; border: 3px solid # 8e8e8e; position: absolute; z-index: 9; left: 0; margin-left: 0px ;}. timeline-line {width: 4px; height: 100%; background: # d0d0d0; border-left: 1px solid # ececec; border-right: 1px solid # ececec; position: absolute; z-index: 8; left: 0; margin-left: 24px; margin-top:-30px ;}}

 

JQuery code

$ (Function () {var _ timeline_row _ = $ ("<div> </div> "). addClass ("row"); $ (". timeline-container "). append (_ timeline_row _); var loadData = function () {$. getJSON ("timeline. json ", function (data) {$. each (data, function (I, tl) {var _ timeline _ =$ ("<div> </div> "). addClass ("timeline"); _ timeline_row _. append (_ timeline _); var _ time_block _ = $ ("<div> </div> "). addClass ("timeline-block"); var _ time_content _ = $ ("<d Iv> </div> "). addClass ("popover timeline-content"); _ time_block _. append (_ time_content _);/*** set the display content */var _ popover_title _ = $ ("
Summary:
1. This article focuses on the layout setting analysis on the timeline, mainly through the relative positioning of the outer container and the absolute positioning of the inner element to achieve the layout effect.
2. Trigger the rolling event mechanism to achieve load effect similar to paging. To trigger a rolling event, we must ensure the rigor of the logic.
The Demo was written a long time ago. The Jquery plug-in did not write very well. It was mixed with CSS styles and was not extracted independently. However, it can be used for sharing and learning. During official development, do not write JavaScript like me. Oh ~.
Finally, Thanks for reading.