Download: http://sc.chinaz.com/jiaoben/131112181390.htm
Others: http://sc.chinaz.com/tag_jiaoben/shijianzhou.html
Effect:
HTML code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <Linkrel= "stylesheet"href= "Css/about.css">6 <style>7 . Page{width:100%;background:#F0F0F0 url (' img/dian2.png ') repeat-x; }8 </style>9 <title>Memorabilia jquery Timeline</title>Ten </Head> One <Body> A <Divclass= "page"> - <Divclass= "header"> - </Div> the - <Divclass= "box"> - <ulclass= "Event_year"> - <Li class= "current"><label for= " ></label></li> + <Li><label for= "+">2012</label></Li> - + </ul> A <ulclass= "Event_list"> at <Div> - <H3ID= "$">2013</H3> - <Li> - <span>May 26</span> - <P><span>Webmaster's Home column revision on-line</span></P> - </Li> in <Li> - <span>April</span> to <P><span>Webmaster Tools products, super monitoring on-line</span></P> + </Li> - </Div> the <Div> * <H3ID= "+">2012</H3> $ <Li>Panax Notoginseng <span>September</span> - <P><span>Webmaster's Home Beijing branch was established</span></P> the </Li> + A </Div> the + </ul> - <Divclass= "Clearfix"></Div> $ $ </Div> - </Div> - <Scriptsrc= "Js/jquery.min_v1.0.js"type= "Text/javascript"></Script> the <Script> - $(function(){Wuyi $('label'). Click (function(){ the $('. Event_year>li'). Removeclass (' Current'); - $( This). Parent ('Li'). addclass (' Current'); Wu var Year= $( This). attr (' for'); - $('#'+Year ). Parent (). Prevall ('Div'). Slideup ( -); About $('#'+Year ). Parent (). Slidedown ( -). Nextall ('Div'). Slidedown ( -); $ }); - }); - </Script>
- <Divstyle= "Text-align:center;clear:both"> A <P>Applicable browser: IE8, 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world.</P> + </Div> the </Body> - </HTML>
Ok
"HTML" "19" advanced article--big event timeline