Smohantimeline.js Cool Time Axis effect

Show Address

Click here to download

Original source

First, parameter description

Item: '. Item ',//Project element top  : 30,//spacing with the next line pointwidth:22,//Point-in-time width cornerwidth:22,//corner width scroll:true  //Click Point in Time , whether to slide

second, CSS style

 /* timeline style */#TimeLine {width:100%;height:auto;min-height:600px;position: relative;padding:20px 0;margin-top:30px; font-size:14px;} #TimeLine > lines{width:2px; height:0; background: #c8c8c8; position:absolute; top:-30px;} #TimeLine > Item{width:45%;height:auto; min-height:120px; background: #fff; position:absolute;} #TimeLine >. item:hover{box-shadow:0 1px 10px rgba (0, 0, 0, 0.1); Background-color:rgba (255,255,255,.9);} #TimeLine >. item point{display:block; width:22px; height:22px; Background:url (icons.png) -138px 0 no-repeat; Z-index:9; Position:absolute; Cursor:pointer; } #TimeLine >. item. point:hover{background-position:-138px-22px;} #TimeLine >. Item Cornerl, #TimeLine >. item. cornerr{display:block; width:22px; height:30px; Background:url ( icons.png) 0-95px no-repeat; Position:absolute;} #TimeLine >. item. cornerl{background-position:-22px-95px;} #TimeLine >. item. cornerr{background-position:0px-95px;}  

Third, HTML construction

<DivID= "TimeLine">    <Divclass= "Lines">&nbsp;</Div>    ...    <Divclass= "Item">        <Divclass= "Item-wraper"style= "padding:10px;">content .... Any HTML code</Div>    </Div>        <Divclass= "Item">        <Divclass= "Item-wraper"style= "padding:10px;">content .... Any HTML code</Div>    </Div>    ...</Div>

Iv. plug-in calls

$ (window). Bind (' Resize ', function () {        $ (' #TimeLine '). Smohantimeline ({item: '. Item '}). Resize ();

Smohantimeline.js Cool Time Axis effect