1、新建html文档。
2、书写hmtl代码。<div class="contrainer header"><div class="w1000 "> <ul class='clearfix '> <li class='float_three'><a href="javascript:;">1111</a></li> <li class='float_three'><a href="javascript:;">2222</a></li> <li class='float_three'><a href="javascript:;">3333</a></li> </ul></div><div class="w1000 tc body"> <p>111111111111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111111111111</p> <p>111111111111111111111111111111111111111111111111111</p> <h1 class='header'>大事件</h1> <div class="event_wrap clearfix"> <div class="middle_line"> </div> </div></div></div>
3、书写css代码。html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.inline_box{font-size:1em;letter-spacing:-.25em;font-family:Arial}.inline_two,.inline_three,.inline_four,.inline_five,.inline_six,.inline_any{display:inline-block;*display:inline;letter-spacing:0;vertical-align:top;*zoom:1}.float_two,.float_three,.float_four,.float_five,.float_six{float:left}.inline_two,.float_two{width:50%;*width:49.9%}.inline_three,.float_three{width:33.33333%;*width:33.3%}.inline_four,.float_four{width:25%;*width:24.9%}.inline_five,.float_five{width:20%;*width:19.9%}.inline_six,.float_six{width:16.66666%;*width:16.6%}.inline_fix{display:inline-block;width:100%;height:0;overflow:hidden}body{font-size:14px;font-family:'微软雅黑';background-color:#f7f7f7;height:100%}.w1000{width:80%;margin:0 auto}.header.contrainer{background-color:#ccc;height:60px;line-height:60px}.header a{display:block;color:#000;text-decoration:none}.body{line-height:40px}.body .header{font-size:20px;margin:50px 0 100px}.event_wrap{position:relative}.event_wrap .middle_line{position:absolute;left:50%;top:0;width:8px;margin-left:0;border-left:1px solid #000;height:100%}.event_wrap .middle_line i{display:block;height:3.31%;border-bottom:1px solid #000;width:60%}.event_wrap .middle_line i.first{padding-top:75px}.event_wrap .middle_line i.last{margin-bottom:25px}.big_squre{margin-left:-30px;left:50%;display:block;position:absolute;top:8px;width:60px;height:60px;background-color:#6e6e6e;border-radius:10px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.big_squre i{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);display:block;position:absolute;left:11px;color:#fff;top:11px;font-size:18px}.small_squire{position:absolute;top:11px;display:block;height:12px;width:12px;padding:3px;border-radius:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg);background-color:#6e6e6e}.small_squire i{display:block;width:12px;height:12px;background-color:#fff;border-radius:3px}.event_wrap .list{height:300px;position:relative;padding-top:75px}.aActiveWid{width:50% !important;filter:alpha(opacity=100) !important;opacity:1 !important}.event_wrap .list:last-child{height:275px}.event_wrap .list .ev_text{position:absolute;opacity:.1;filter:alpha(opacity=10);width:0;overflow:hidden;-o-transition:all 3s ease;-moz-transition:all 3s ease;-ms-transition:all 3s ease;-webkit-transition:all 3s ease;transition:all 3s ease}.event_wrap .list_right .ev_text_odd,.event_wrap .list_left .ev_text_event{text-align:left;left:50%}.event_wrap .list_right .ev_text_event,.event_wrap .list_left .ev_text_odd{text-align:right;left:initial;right:50%}.event_wrap .list_right .small_squire,.event_wrap .list_left .ev_text_event .small_squire{left:4px}.event_wrap .list_left .small_squire,.event_wrap .list_right .ev_text_event .small_squire{right:3px;left:inherit}.event_wrap .list .small_line,.event_wrap .list_left .ev_text_event .samll_line{display:inline-block;position:absolute;height:1px;overflow:hidden;border-top:1px solid #000;top:19px;left:24px;width:13%}.event_wrap .list_left .ev_text_odd .small_line,.event_wrap .list_right .ev_text_event .small_line{right:23px;left:initial}.ev_text h3{font-size:18px;padding-left:20%;width:80%}.ev_text p{line-height:20px;padding-left:20%;width:80%;height:40px;overflow:hidden}.list_right .ev_text_event h3,.list_right .ev_text_event p,.list_left .ev_text_odd h3,.list_left .ev_text_odd p{padding-right:100px;padding-left:inherit}
4、书写jquery.eventFlow.js并添加js代码。(function(d,b,a,f){var c="eventFlow",e={};function g(i,h){this.init(i,h)}g.prototype={init:function(j,i){this.spliceHtml(j,i);var k=d(".event_wrap .list .ev_text");var h=[];k.each(function(l,m){h.push(d(this).offset().top)});d(b).scroll(function(n){var m=d(this).scrollTop();for(var l=0;l<h.length;l++){if(m+d(a).height()*2/3>h[l]){d(k[l]).addClass("aActiveWid")}else{d(k[l]).removeClass("aActiveWid")}}})},spliceHtml:function(p,m){var k=p;var h=k.find(".middle_line");var o="";var q="";for(var n=0;n<m.events.length;n++){o+='<i class="first"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="last"></i>';if((n+1)%2==0){q+='<div class="list_right list">'}else{q+='<div class="list_left list">'}q+='<span class="big_squre"><i>'+m.events[n].year+"</i></span>";for(var l=0;l<m.events[n].events.length;l++){if((l+1)%2==0){q+='<div class="ev_text_odd ev_text ev_t'+m.events[n].events[l].mouths+'">'}else{q+='<div class="ev_text ev_text_event ev_t'+m.events[n].events[l].mouths+'">'}q+='<span class="small_squire"><i></i></span><span class="small_line"></span><h3>'+m.events[n].events[l].times+"</h3><p>"+m.events[n].events[l].even+"</p></div>"}q+="</div>"}k.append(q);h.html(o)}};d.fn[c]=function(h){h=d.extend(true,h,e);return this.each(function(){new g(d(this),h)})}})(jQuery,window,document);
5、书写js代码。<script>$(function(){ var bigEvent =[{ 'year' : 2015, 'events' :[ { 'mouths' : 2, 'times' :'2015年2月29', 'even' :'111111111111111111111111111111111111111111111111111' },{ 'mouths' : 4, 'times' :'2015年4月3', 'even' :'111111111111111111111111111111111111111111111111111' },{ 'mouths' : 10, 'times' :'2015年10月11日', 'even' :'111111111111111111111111111111111111111111111111111' }]},{ 'year' : 2016, 'events' :[ { 'mouths' : 2, 'times' :'2016年2月18', 'even' :'111111111111111111111111111111111111111111111111111' },{ 'mouths' : 4, 'times' :'2016年4月15', 'even' :'111111111111111111111111111111111111111111111111111' } ]}]; $('.event_wrap').eventFlow({'events':bigEvent});})</script>
6、代码整体结构。
7、查看效果。
