1、新建html文档。
2、书写hmtl代艨位雅剖码。<div id="page"><ol id=媪青怍牙"timeline1"> <li> <time datetime="1991-10-01">一月 1991</time> <p>111111111111111111111111</p> </li> <li> <time datetime="1994-10">二月 1994</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2001-09-11">三月 2001</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2003">2003</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2005-08">四月 2005</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2009-06-19">五月 2009</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2010-06-22">六月 2009</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2010-08-16">七月 2010</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2012-01-11">八月 2012</time> <p>111111111111111111111111</p> </li> <li> <time datetime="2013-03">九月 2013</time> <p>111111111111111111111111</p> </li></ol><h2>十一月 1949</h2><ol id="timeline2"> <li> <time datetime="1900">十二月 1900</time> <p>111111111111111111111111</p> </li> <li> <time datetime="1900">1900</time> <p>1111111111111111111111111111</p> </li></ol></div>
3、书写css代码。<style>body { font-size: 1em; background: #fdfdfd; color: #585858;}#page { margin: 0 auto; width: 960px; }a { color: #585858; }.b1njTimeline { background : url(f43059.gif) top center repeat-y; width : 800px; padding : 50px 0; margin : 0 auto 50px auto; position: relative; }.b1njTimeline ol { margin: 0; padding: 0; list-style: none; }.b1njTimeline * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }.b1njTimeline .events:before, .b1njTimeline .events:after { content: " "; width: 10px; height: 10px; display: block; background: #f43059; position: absolute; top: 0; left: 50%; margin-left: -5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }.b1njTimeline .events:after { margin-left: -7px; background: none; border: 7px solid transparent; border-top-color: #f43059; width: 0; height: 0; top: auto; bottom: -7px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }.b1njTimeline .events li { position: absolute; width: 330px; margin: 0 0 10px 0; top: 0; text-align: right; }.b1njTimeline .event { position: absolute; width: 330px; padding: 5px; background: #fef8c4; border: 1px solid #d8d566; top: center; margin: -1.5em 0 0 0; border-radius: 5px; -webkit-box-shadow: 1px -2px 1px #e9e9e9; -moz-box-shadow: 1px -2px 1px #e9e9e9; box-shadow: 1px -2px 0px #fdf5b0; cursor: pointer; }.b1njTimeline .event:hover, .b1njTimeline .event.open { z-index: 100; background: #fcf085; border: 1px solid #d8d566; }.b1njTimeline time { font-weight: bold; }.b1njTimeline .events p { margin: 0; }.b1njTimeline .events li:before, .b1njTimeline .events li:after { content: " "; width: 70px; height: 1px; background: #f43059; position: absolute; top: 0; display: none; }.b1njTimeline .events li:nth-of-type(even) { text-align: left; right: 0; }.b1njTimeline .events li:nth-of-type(odd):before { /* Move branches */ display: block; background: #d8d566; background: -moz-linear-gradient(left, #d8d566 0%, #f43059 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #d8d566), color-stop(100%, #f43059)); background: -webkit-linear-gradient(left, #d8d566 0%, #f43059 100%); background: -o-linear-gradient(left, #d8d566 0%, #f43059 100%); background: -ms-linear-gradient(left, #d8d566 0%, #f43059 100%); background: linear-gradient(to right, #d8d566 0%, #f43059 100%); left: 100%; }.b1njTimeline .events li:nth-of-type(even):after { /* Move branches */ display: block; background: #f43059; background: -moz-linear-gradient(left, #f43059 0%, #d8d566 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f43059), color-stop(100%, #d8d566)); background: -webkit-linear-gradient(left, #f43059 0%, #d8d566 100%); background: -o-linear-gradient(left, #f43059 0%, #d8d566 100%); background: -ms-linear-gradient(left, #f43059 0%, #d8d566 100%); background: linear-gradient(to right, #f43059 0%, #d8d566 100%); right: 100%; }.b1njTimeline .description { height: 0; overflow: hidden; text-align: left; }.b1njTimeline .description:before { content: '+'; display: block; width: 1em; height: 1em; position: absolute; top: 0em; }.b1njTimeline .events li:nth-of-type(even) .description:before { right: 0; }.b1njTimeline .open .description { margin-top: 10px; height: auto; -moz-transition: 1s ease; }.b1njTimeline .open .description:before { content: '-'; }.b1njTimeline .timeline_dates li { display: block; position: absolute; left: 50%; width: 100px; top: 0px; margin-left: 10px; }.b1njTimeline .timeline_dates li div { position: absolute; margin-top: -.6em; }.b1njTimeline .timeline_dates li:before { content: " "; width: 5px; height: 1px; background: #f43059; position: absolute; top: 0; margin-left: -10px; }</style>
4、添加引用js。<script src="js/jquery-1.8.0.min.js"></script><script src="js/moment.min.js"></script><script src="js/jquery.b1njTimeline.js"></script><script> $(function() { $('#timeline1').b1njTimeline({ 'height' : 600 }); $('#timeline2').b1njTimeline({ 'height' : 1500 }); });</script>
5、书写jquer鲻戟缒男y.b1njTimeline.js。(function($,window,undefined){var pluginName="b1njTimeline",document=window.document,defaults={height:400,margeTop:40};function Plugin(element,options){this.element=element;this.$element=null;this.options=$.extend({},defaults,options);this._dateDebut=false;this._dateFin=false;this._duree=false;this._name=pluginName;this.init()}Plugin.prototype.init=function(){var self=this;$(this.element).addClass("events").wrap('<div class="b1njTimeline" />');this.$element=$(this.element).parent();this.$element.css("height",this.options.height);this._dateDebut=new moment(this.$element.find("li:first time").attr("datetime"),"YYYY-MM-DD");this._dateFin=new moment(this.$element.find("li:last time").attr("datetime"),"YYYY-MM-DD");this._duree=this._dateFin.diff(this._dateDebut);this.$element.find("li").each(function(){$li=$(this);$li.wrapInner('<div class="event" />');var date=new moment($li.find("time").attr("datetime"),"YYYY-MM-DD");$li.css("top",self._getTop(date));$li.on("click",function(e){self.open(this)})});var date=this._dateDebut.year();var num_years=this._dateFin.diff(this._dateDebut,"years");var tranche=1;if(num_years>500){tranche=100}else{if(num_years>250){tranche=50}else{if(num_years>100){tranche=25}else{if(num_years>50){tranche=10}else{if(num_years>25){tranche=5}else{if(num_years>10){tranche=2}}}}}}date=date+1;while(date%tranche!=0){date=date+1}var html_dates='<ol class="timeline_dates">';for(var i=date;i<=this._dateFin.year();i=i+tranche){var top=self._getTop(new moment(i.toString(),"YYYY"));html_dates+='<li style="top: '+top+'px"><div>'+i+"</div></li>"}html_dates+="<ol>";this.$element.find("ol").after(html_dates)};Plugin.prototype._getTop=function(date){var top=date.diff(this._dateDebut)*this.options.height/this._duree;top=Math.abs(parseInt(top));top=top+this.options.margeTop;return top};Plugin.prototype.open=function(desc){var $evenement2=$(desc).find(".event");if($evenement2.hasClass("open")){$evenement2.removeClass("open")}else{this.$element.find(".event").removeClass("open");$evenement2.addClass("open")}};$.fn[pluginName]=function(options){return this.each(function(){if(!$.data(this,"plugin_"+pluginName)){$.data(this,"plugin_"+pluginName,new Plugin(this,options))}})}}(jQuery,window));
6、代码整体结构
7、查看效果
