집 >웹 프론트엔드 >JS 튜토리얼 >타임라인 효과를 구현하기 위한 jQuery 플러그인 Timelinr 정보

타임라인 효과를 구현하기 위한 jQuery 플러그인 Timelinr 정보

不言원래의: 2018-06-25 14:17:491964검색

이 글은 타임라인 효과를 구현하기 위한 jQuery 플러그인 Timelinr를 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 하나 이상의 측면이 연속적으로 연결되어 상대적으로 완전한 기록 시스템을 형성한 다음 이 기사는 인터넷에서 가장 효과적인 이벤트 중 하나를 수집하여 사용자에게 공유합니다. 여러분

머리말

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

HTML

본문에 p#timeline을 표시 영역으로 만들고, #dates가 타임라인을 만듭니다. 예에서는 연도를 주축으로 사용하고, #issues를 콘텐츠 표시 영역으로 사용합니다. 주축 포인트의 연도에 해당하는 내용이 표시됩니다. 해당 ID에 주의하세요.

<p 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 --> 
</p>

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(&#39;dot.gif&#39;) 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(&#39;biggerdot.png&#39;) 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:&#39;vertical&#39; 
  }); 
});

jQuery Timelinr는 필요에 따라 설정할 수 있는 다양한 설정 가능한 옵션을 제공합니다. 그림과 같이:

휠 드라이버 지원

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

플러그인을 다운로드한 후 페이지로 가져옵니다:

<script src="jquery.mousewheel.js"></script>

그런 다음 jquery.timelinr-0.9.53.js를 수정하고 다음을 추가합니다. 대략 260행의 코드:

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

예제에서 prevButton 및 nextButton 버튼을 차단했습니다. 휠 이벤트가 지원으로 설정된 경우 휠 업은 prevButton을 클릭하는 것과 동일하고 휠 다운은 동일합니다. nextButton을 클릭하는 것입니다.

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

$(function(){ 
  $().timelinr({ 
    mousewheel:  &#39;true&#39; 
  }); 
});

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목해주세요!

타임라인 효과를 구현하기 위한 jQuery 플러그인 Timelinr 정보

관련 기사