텍스트 자동 스크롤, 시작, 정지...
본문
안녕하세요!
프롬프터에 글씨가 일정한 속도로 올라가는 것을 구현해보고 있습니다.
textarea 로 하거나, div 영역에 overflow: hidden 으로 스크롤을 만들고
안에 있는 내용을 자동으로 스크롤 하게 하려고 하는데요..
예)
--------------------------------------
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람
대한으로 길이보전하세
.......
-------------------------------------
[시작] [정지] [처음으로]
--------------------------------------
위와 같이 시작 버튼을 누르면 자동으로 스크롤이 되고,,
정지버튼을 누르면 멈춤, 다시 시작을 누르면 정지된 부분부터
자동 스크롤, 처음으로를 누르면 가장 상단으로 가게 하려고 합니다.
여러 가지 자바스크립트를 찾아서 적용해보고 있는데,,,
잘 되지가 않아서요.. 조언 구합니다...
혹시 비슷한 예제가 있을까요?
답변 1
css animation 을 사용 하거나 marguee tag를 활용 할 수 있습니다.
쉽게 할 수 있는 마퀴 소스 입니다.
<marquee id='scroll_text' direction="up" loop="3" scrollamount="2" style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" >
<div style="width:99%;height:120px">
<div style="width:100%;" onMouseOver="document.getElementById('scroll_text').stop();" onMouseOut="document.getElementById('scroll_text').start();">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라만세<br>
무궁화 삼천리 화려강산 대한사람<br>
대한으로 길이보전하세
</div>
<div style="width:100%;" onMouseOver="document.getElementById('scroll_text').stop();" onMouseOut="document.getElementById('scroll_text').start();">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라만세<br>
무궁화 삼천리 화려강산 대한사람<br>
대한으로 길이보전하세
</div>
</div>
</marquee>
loop="반복회수" scrollamount="속도" 입니다.
참고 하세요.
onMouseOver 을 onClick event로 변경해서 사용할 수 있을 것입니다
