2014-02-06 3 views
0
#player #title{ 
left: 90px; 
width: 200px; 
overflow: hidden; 
} 

텍스트 (# 제목)는 선택 윤곽이되어야합니다. 그러나 HTML에는 변경 사항이 없어야합니다 (Java 스크립트 만 허용됨). 진행 방법? 친절하게 텍스트가 알려진 변경하지 않을 경우 일부 CSS3 사용할 수 ...이 부분 안에 텍스트가 들어가야합니다.

+0

가능한 복제 http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee – Kushal

답변

0

우리를 도와 : 전환 및 텍스트 그림자를하고 텍스트 들여 쓰기, 예제로 슬라이드합니다

p { 
    text-shadow:35em 0 0;/* equal to length of text */ 
    width:15em; 
    white-space:nowrap; 
    overflow:hidden; 
animation: marqueeme 3s infinite; 
    margin:auto; 
    background:yellow; 
    border:solid red; 
} 
@keyframes marqueeme { 
    to {text-indent:-35em; 
} 

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 참조 테스트 : http://codepen.io/gc-nomade/pen/wGtmy

을 당신은 EM은 MATC에 값 사용할 필요가 h를 텍스트 크기와 함께 사용하려면 문자 간격을 재설정해야 할 수도 있습니다. 텍스트가 변경되거나 일부 글꼴로 인해 깨질 수 있습니다.

0

http://jsfiddle.net/4mTMw/8/

<div class='marquee'> 
    <div class='marquee-text'> 
     Testing this marquee function 
    </div> 
</div> 
<script> 
    var marquee = $('div.marquee'); 
    marquee.each(function() { 
     var mar = $(this),indent = mar.width(); 
     mar.marquee = function() { 
      indent--; 
      mar.css('text-indent',indent); 
      if (indent < -1 * mar.children('div.marquee-text').width()) { 
       indent = mar.width(); 
      } 
     }; 
     mar.data('interval',setInterval(mar.marquee,1000/60)); 
    }); 
</script> 
+0

답장을 보내 주셔서 감사합니다. 내 HTML 코드는 다음과 같습니다.

Title Goes here
그러나 HTML에는 변경 사항이 없어야합니다. – Joshua

관련 문제