2단계: CSS 스타일 정의
다음으로 스크롤 프롬프트 상자를 아름답게 하기 위해 CSS 스타일을 정의해야 합니다. 특정 스타일은 필요에 따라 맞춤 설정할 수 있습니다. 다음 예는 참고용입니다.
#scrolling-box {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}위 코드에서는 CSS의 애니메이션 속성을 사용하여 스크롤 효과를 구현합니다. 애니메이션 @keyframes에 초기 상태와 종료 상태의 변환 속성을 설정하고 수직 변위를 점진적으로 변화시켜 스크롤 효과를 구현합니다.
3단계: jQuery 코드 추가
마지막으로 jQuery를 사용하여 스크롤 프롬프트 상자의 콘텐츠를 동적으로 추가하거나 수정합니다. 먼저 jQuery 라이브러리를 소개한 후 다음 코드를 작성해야 합니다.
$(document).ready(function() {
// 添加内容到滚动提示框
$('#content').append('<p>这是一条示例提示信息。</p>');
// 修改滚动提示框的样式
$('#scrolling-box').css('background-color', '#f5f5f5');
});위 코드에서는 코드를 실행하기 전에 문서가 로드되었는지 확인하기 위해 jQuery의 .ready() 함수를 사용합니다. 선택기를 통해 스크롤 프롬프트 상자의 콘텐츠 컨테이너와 외부 컨테이너를 선택할 수 있으며, .append() 함수를 사용하여 콘텐츠를 추가하고 .css() 함수를 사용하여 스타일을 수정할 수 있습니다.
요약:
HTML, CSS 및 jQuery의 조합을 통해 아름다운 스크롤 프롬프트 상자를 쉽게 만들 수 있습니다. HTML 구조를 생성하고, CSS 스타일을 정의하고, jQuery를 사용하여 콘텐츠를 추가하고 스타일을 수정하면 됩니다. 실제 개발에서는 필요에 따라 스타일 조정과 기능 확장을 할 수 있습니다. 이 글이 만족스러운 스크롤 툴팁을 만드는 데 도움이 되기를 바랍니다.