[JavaScript] 전광판 효과 구현하기[JavaScript] 전광판 효과 구현하기
Posted at 2019. 12. 5. 13:51 | Posted in JavaScript & jQuery/JavaScript출처① : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
출처② : https://balancing425.tistory.com/7
CSS : http://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js
■ 전광판 효과 구현(Marquee 대체)
한때 HTML이 막 유행하던 초창기에 <marquee> 태그가 들어간 싸이트는
뭔가 굉장히 화려한 사이트라고 느껴지던 때가 있었다.
지금은 완전히 묻혔지만.
프로젝트 진행중 marquee와 비슷하지만,
무한 루프처럼 끊이없이 화면에 텍스트 내용이 비춰야 하는
(<marquee> 태그사용시 해당영역에서 모든 내용이 다 사라지고 나서 출력된다.)
상황이 있었기에 필요한 코드를 찾았고 정리해 본다.
# 소스코드
<html> <head> <title>:: JavaScript 전광판 효과 ::</title> <style type="text/css"> span { margin-right:50px; } </style> <script type="text/javascript" src="./crawler.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { marqueeInit({ uniqueid : "mycrawler" , style : { "padding" : "2px" , "width" : "600px" , "height" : "30px" } , inc : 5 // 속도 , mouse : "cursor driven" // 마우스 사용여부 , moveatleast : 2 // 이동속도 , neutral : 150 , savedirection : true // false를 선언하면 마우스 커서가 위치하는 순간 역방향으로 움직인다. , random : false // 나오는 순서(기본값 : true) }); }); </script> </head> <body> <h1>■ 전광판 효과</h1> <div class="marquee" id="mycrawler"> <span>I'm defying gravity And you can't pull me down!</span> <span>이제는 나 중력을 벗어나 날아올라 날개를 펼칠거야</span> <span>They'll never bring us down!</span> <span>아무도 우릴 막지 못할 거야</span> <span>Everyone deserves the chance to fly</span> <span>그 누구라도 날아오를 자격이 있잖아!</span> </div> </select> </body> </html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] 체크박스 전체 선택 - Sample (0) | 2019.12.19 |
|---|---|
| [JavaScript] 실시간 타이머(시계) 만들기 (2) | 2019.12.05 |
| [JavaScript] AJAX 통신 정리 (0) | 2019.11.17 |
| [JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43) | 2019.06.13 |
| [JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능 (0) | 2019.05.23 |
