뉴스 스티커에 표시 항목

Question

나는 뉴스 시세의 특징과 비슷한 어떤 다른 것을 성취하려고합니다. 이 질문을하기 전에 서로 다른 여러 뉴스 시세 기 jquery 플러그인을 사용하여 작업하도록했습니다. 그러나 여전히 행운이 없습니다.

이것은 사용중인 마크 업이며 그것을 통해 나의 요구 사항을 설명하겠습니다.

<div class="container"> 
    <ul class="feeds" id="feeds"> 
     <li class="category">category 01</li> 
     <li class="category-item">Sub category 01</li> 
     <li class="category-item">Sub category 02</li> 
     <li class="category-item">Sub category 03</li> 
     <li class="category-item">Sub category 04</li>       
     <li class="category">category 02</li> 
     <li class="category-item">Sub category 01</li> 
     <li class="category-item">Sub category 02</li> 
     <li class="category-item">Sub category 03</li> 
     <li class="category-item">Sub category 04</li> 
    </ul> 
</div> 

뉴스 표시 줄처럼 이러한 목록 항목을 가로 막대에 표시해야합니다. 그것을 어떻게 표시 할 필요가 있는가하는 것은 하나의 카테고리 아이템이며, 그 다음에 두 개의 하위 카테고리 아이템이 연속적으로 나옵니다. 특정 카테고리에 두 개 이상의 하위 카테고리가있는 경우 다음 두 개의 하위 카테고리 항목을 표시하고 현명한 방법이 필요합니다. 하위 카테고리를 두 번째로 표시 할 때 메인 카테고리 이름은 여전히 ​​행에 표시되어야합니다.

마지막으로 나는 Jquery Advance News Ticker 플러그인을 사용해 보았습니다. 그것은 가까이 있지만 100 %

$('#feeds').newsTicker({ 
    row_height: 40, 
    max_rows: 1, 
    duration: 3000, 
    pauseOnHover: 0 
}); 

그래서 사람이 어떻게 자바 스크립트와이를 달성하기 위해 말해 줄 수 또는 내가이 일을 pluging 어떤 JQuery와이 알 수 있습니다.

UPDATE : CSS - 사람이 관련 나를 도움이 될 것입니다

> .container { 
     background: #1e1e1e; 
     height: 40px; 

     .feeds { 
      list-style: none; 
      float: left; 
      margin: 0; 
      padding: 0; 
      display: table; 

      > li { 
       display: inline-block; 
       color: #FFFFFF; 
       display: inline-block; 
       padding-right: 50px; 
       //display: table-cell; 
       vertical-align: middle; 
       padding-top: 5px; 
      } 

      > li.category { 
       background: #a11041; 
       margin: 7px 30px 0; 
       padding: 3px 10px; 
      } 
     } 
    } 

희망.

모든 아이디어는 크게 감사하겠습니다. 감사합니다.

Answer 1

사람들이 왜 그렇게 많은 플러그인을 사용하는지 결코 모르지만, 많은 공간 (크기 바이스)을 사용합니다!

어쨌든 나는이 일을 오래 전에해야만했다. 나는 순수한 CSS와 jQuery 만 사용하지 않았다. 이 예제는 항상 움직이는 뉴스 스티커를 제공합니다. 당신이 제공 한 것과 같은 예제를 원한다면 쉽게 구현할 수 있습니다. 또는 너무 어렵다면 알려주십시오. 그러면 제가 제공 할 것입니다.

먼저 컨테이너의 오버플로를 css로 숨기도록 설정 한 다음 ul을 다른 div 안에 넣어야합니다 (#box라고 부름).

와 jQuery를위한 같이

$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear'); 
setTimeout(function(){ 
    $('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px'); 
    },5000); 
setInterval(function(){ 
    $('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear'); 
    setTimeout(function(){ 
     $('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px'); 
     },5000); 
    },5020); 

애니메이션의 marginTop은 리튬의 높이의 부정적인해야한다.

http://codepen.io/anon/pen/ClzLy

Answer 2

내가 당신이 원하는에 대한 기존 솔루션을 찾을 수 있지만, 경우에 당신은 당신의 자신의 솔루션을 작성하는 계획 : 여기

데모입니다 (이 예에서는이 -110px입니다) 이것은 도움이 될 수 있습니다.

다소 다른 HTML 구조를 사용하지만 이것이 실현하려는 것입니다.

는 HTML : CSS와

<div id="feed"> 
    <ul> 
     <li> 
      Category 1 
      <ul> 
       <li>Subcategory 1</li> 
       <li>Subcategory 2</li> 
       <li>Subcategory 3</li> 
      </ul> 
     </li> 
     <li> 
      Category 2 
      <ul> 
       <li>Subcategory 1</li> 
       <li>Subcategory 2</li> 
       <li>Subcategory 3</li> 
       <li>Subcategory 4</li> 
       <li>Subcategory 5</li> 
       <li>Subcategory 6</li> 
       <li>Subcategory 7</li> 
       <li>Subcategory 8</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

당신은 뷰포트 (#feed)이 하나의 카테고리 이름과 두 개의 하위 범주를 보여줍니다 있는지 확인하십시오. 그런 다음 자바 스크립트를 사용하여 하위 ul-element의 위쪽 또는 여백을 변경하여 사용자가 다음 두 개의 하위 범주로 이동할 수 있습니다.사용자가 하위 카테고리의 맨 아래에 도달하면 다음 카테고리로 이동합니다. 사용자가 마지막 카테고리에 도달하면 첫 번째 카테고리로 다시 이동합니다.

실제 예 : http://jsfiddle.net/Ln73X/1/