1. 홈
  2. 질의 응답
  3. 자바 스크립트 가로 스크롤 텍스트

자바 스크립트 가로 스크롤 텍스트

2016-07-22 3 views
0

내 앱에서 가로 스크롤을 원합니다. 여러 가지 예가 있지만 내 필요에 맞는 것을 찾았습니다. 하지만 그것을 시도 할 때 그냥 작동하지 않아야합니다. 보고 문제가 무엇인지 말씀 해주십시오 : 콘솔에 오류가 없습니다 자바 스크립트 가로 스크롤 텍스트

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.marquee { 
    white-space:no-wrap; 
    overflow:hidden; 
} 
div.marquee > div.marquee-text { 
    white-space:nowrap; 
    display:inline; 
    width:auto; 
} 
</style> 
<script> 
var marquee = $('div.marquee'); 
console.log(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> 
</head> 
<body> 
<div class='marquee'> 
    <div class='marquee-text'> 
     Testing this marquee function 
    </div> 
</div> 

</body> 
</html>

갱신 : 당신은 당신의 웹 사이트에서 jQuery를 포함하는 것을 잊었다 enter image description here

출처

2016-07-22 dmx

+0

음 .... 오래된 '' 태그를 사용할 수 있습니다. –

+4

@GavinThomas 1998 : 아니요) 은 쓸모가 없습니다. (http://caniuse.com/#search=marquee) –

+0

1) 이전 버전과의 호환성을 제외한 애니메이션에는'setInterval'을 사용하지 마십시오. 브라우저,'requestAnimationFrame' 및 CSS 애니메이션이 더 안정적입니다. 2) 프레임마다'text-indent'와'width'와 같은 속성을 찾고 설정하는 것은 성능에 좋지 않습니다. 변형이 더 좋습니다. 3) 정말 천막이 필요합니까? ;) – gcampbell

답변

4

. 그렇지 않으면 예상대로 작동합니다 (적어도 그렇게 생각합니다).

$(document).ready(function() { 
 
    var marquee = $('div.marquee'); 
 
    console.log(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)); 
 
    }); 
 
});
div.marquee { 
 
    white-space:no-wrap; 
 
    overflow:hidden; 
 
} 
 
div.marquee > div.marquee-text { 
 
    white-space:nowrap; 
 
    display:inline; 
 
    width:auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='marquee'> 
 
    <div class='marquee-text'> 
 
     Testing this marquee function 
 
    </div> 
 
</div>

편집 : 요소가로드 될 수 있도록하기 위해 $(document).ready()을 추가했다.

출처

2016-07-22 13:29:57 Dygestor

1

스크립트를 실행하기 전에 페이지로드 대기. 

<script> 
$(document).ready(function(){ 
var marquee = $('div.marquee'); 
console.log(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>

그렇게 this 질문을보고, 헤더 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 을 잊지 말아.

출처

2016-07-22 14:20:30 dmx

관련 문제

 관련 문제