jQuery 플러그인 Timelinr는 타임라인 효과를 구현합니다._jquery

머리말

개발 과정, 주요 이벤트 등을 표시하는 일부 웹사이트에 특히 적합한 타임라인 플러그인입니다. 이 플러그인은 jQuery를 기반으로 하며 슬라이드 전환, 가로 및 세로 스크롤이 가능하고 키보드 화살표 키를 지원합니다. 확장 후에는 마우스 휠 이벤트를 지원할 수 있습니다.

HTML

본문에서 표시 영역으로 div #timeline을 생성하고 #dates는 타임라인입니다. 예제에서는 연도를 주축으로 사용하고 #issues를 콘텐츠 표시 영역으로 사용합니다. 즉, 다음에 해당하는 콘텐츠를 표시합니다. 주축 지점의 연도는 해당 ID에 주의하세요.

<div id="timeline"> 
  <ul id="dates"> 
   <li><a href="#2011">2011</a></li> 
   <li><a href="#2012">2012</a></li> 
  </ul> 
  <ul id="issues"> 
   <li id="2011"> 
     <p>Lorem ipsum.</p> 
   </li> 
   <li id="2012"> 
     <p>分享生活 留住感动</p> 
   </li> 
  </ul> 
  <a href="#" id="next">+</a> <!-- optional --> 
  <a href="#" id="prev">-</a> <!-- optional --> 
</div> 

jQuery Timelinr는 jQuery에 의존하므로 먼저 jQuery 라이브러리와 jQuery Timelinr 플러그인을 html로 로드해야 합니다.

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.timelinr-0.9.53.js"></script>

css

다음으로 CSS를 사용하여 타임라인을 가로로 배열할지 세로로 배열할지를 제어할 수 있습니다. 다음은 세로 배열, 즉 세로 배열입니다. 스크롤.

#timeline {width: 760px;height: 440px;overflow: hidden;margin: 40px auto; 
position: relative;background: url('dot.gif') 110px top repeat-y;} 
#dates {width: 115px;height: 440px;overflow: hidden;float: left;} 
#dates li {list-style: none;width: 100px;height: 100px;line-height: 100px;font-size: 24px; 
 padding-right:20px; text-align:right; background: url('biggerdot.png') 108px center no-repeat;} 
#dates a {line-height: 38px;padding-bottom: 10px;} 
#dates .selected {font-size: 38px;} 
#issues {width: 630px;height: 440px;overflow: hidden;float: right;}   
#issues li {width: 630px;height: 440px;list-style: none;} 
#issues li h1 {color: #ffcc00;font-size: 42px; height:52px; line-height:52px; 
 text-shadow: #000 1px 1px 2px;} 
#issues li p {font-size: 14px;margin: 10px;line-height: 26px;} 

jQuery

타임라인 플러그인 호출은 매우 간단합니다. 다음 코드를 실행하세요.

$(function(){ 
  $().timelinr({ 
      orientation:'vertical' 
  }); 
});

jQuery Timelinr는 필요에 따라 설정할 수 있는 다양한 구성 옵션을 제공합니다. 사진과 같이:

서포트 롤러 드라이브

또한 현재 jQuery Timelinr는 마우스 휠 드라이버를 지원하지 않습니다. 실제로 마우스 휠 드라이버를 지원하도록 플러그인을 약간 확장할 수 있습니다. 여기서는 휠 시간 플러그인인 jquery.mousewheel을 사용해야 합니다. js

플러그인을 다운로드한 후 다음 페이지에서 가져오세요.

a05b1259f35e46dd590d9e75e10ac8682cacc6d41bbb37262a98f745aa00fbf0

그런 다음 jquery.timelinr-0.9.53.js를 수정하고 약 260번째 ​​줄에 다음 코드를 추가합니다.

//--------------Added by helloweba.com 20130326---------- 
if(settings.mousewheel=="true") { //支持滚轮 
  $(settings.containerDiv).mousewheel(function(event, delta, deltaX, deltaY){ 
    if(delta==1){ 
      $(settings.prevButton).click(); 
    }else{ 
      $(settings.nextButton).click(); 
    } 
  }); 
} 

예제에서는 prevButton 및 nextButton 버튼을 차단했습니다. 휠 이벤트가 지원되도록 설정된 경우 휠 업은 prevButton을 클릭하는 것과 동일하며, 휠 다운은 nextButton을 클릭하는 것과 같습니다.

마지막으로 다음 코드를 사용하면 전체 타임라인에서 휠 이벤트를 지원할 수 있습니다

$(function(){ 
  $().timelinr({ 
    mousewheel:  'true' 
  }); 
});