JavaScript의 마키 요소
우리는 대부분 웹 사이트나 웹 페이지에서 콘텐츠 텍스트를 장식해야 합니다. Marquee는 콘텐츠 표현을 아름답게 하는 기능 중 하나입니다.
콘텐츠를 위에서 아래로, 아래에서 위로, 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 자동으로 스크롤해야 하는 경우 일반적으로 소스 코드에서 선택 윤곽을 사용합니다. 이 글에서는 marquee를 구현하기 위한 HTML 기본 태그와 자바스크립트 커스텀 코드에 대해 알아봅니다.
HTML에서 Marquee 태그 사용
HTML에는 웹 콘텐츠를 자동 스크롤하는 marquee 태그가 있습니다. 기본적으로 콘텐츠는 오른쪽에서 왼쪽으로 스크롤되지만 direction="up"과 같이 스크롤 방향(위, 아래, 오른쪽, 왼쪽)을 사용자 지정할 수 있지만 이 태그는 HTML 5에서 더 이상 사용되지 않습니다.
예제 코드:
<html>
<head>
<title>Example for HTML Marquee Tag</title>
</head>
<h1>
Delft stack marquee tag example
</h1>
<marquee width="40%" direction="up" height="30%">
Delft stack is a best website to learn programming skills!
</marquee>
</html>
위의 html 소스 코드에서 텍스트 콘텐츠에 기본 HTML 마키 태그를 사용했습니다. 우리는 인라인 CSS로 높이와 너비를 정의하고 방향을 위로 사용자 지정했습니다.
JavaScript를 사용하여 Marquee 기능 추가
사용자 지정 기능의 도움으로 JavaScript 및 J-Query를 사용하여 웹 콘텐츠에 선택 윤곽 기능을 추가할 수 있습니다. 높이 및 너비 위치를 사용하여 콘텐츠를 원하는 방향으로 스크롤할 수 있습니다.
애니메이션을 적용하고 스크롤하려는 콘텐츠에 대한 ID를 정의하고 해당 ID를 선택 윤곽의 사용자 정의 기능에 전달합니다.
예제 코드:
<html>
<head>
<title>Example for JavaScript Marquee</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
#text{
cursor:pointer;
overflow:hidden;
position:absolute;
left:10px;
margin-right:10px;
top:10px;
}
</style>
<script>
function marquee(a, b) {
var width = b.width();
var start_pos = a.width();
var end_pos = -width;
function scroll() {
if (b.position().left <= -width) {
b.css('left', start_pos);
scroll();
}
else {
time = (parseInt(b.position().left, 10) - end_pos) *
(10000 / (start_pos - end_pos)); //we can increase or decrease speed by changing value 10000
b.animate({
'left': -width
}, time, 'linear', function() {
scroll();
});
}
}
b.css({
'width': width,
'left': start_pos
});
scroll(a, b);
}
$(document).ready(function() {
marquee($('#display'), $('#text')); //we need to add name of container element & marquee element
});
</script>
<h1 id="text" >
Delft stack is a best website to learn programming skills!
</h1>
</html>
J-Query 기능을 사용하기 위해 위의 소스코드에서 J-Query Google CDN을 사용하였다. HTML 페이지 소스의 헤드 내부에 J-Query Google CDN 링크를 포함합니다.
커스텀 마키 함수를 선언했습니다. 높이 너비 위치 및 CSS를 사용하여 콘텐츠를 애니메이션하고 스크롤하는 데 도움이 됩니다.
H1 태그를 사용하여 텍스트 콘텐츠를 표시하고 해당 HTML 요소에 대한 ID를 정의했습니다. (document).ready() 내부에서 요소 ID를 인수로 사용하고 특정 HTML 요소에 애니메이션을 적용하는 marquee 함수를 전달했습니다.