js_javascript 기술로 구현된 가로 중단 없는 텍스트 스크롤

제가 원래 생각한 태그는 수평 스크롤을 가능하게 하는 였습니다. 매니저님이 시작 위치가 맨 오른쪽에서 나온다고 하더군요. 중앙에서 나오거나 맨 왼쪽에서 나오도록 변경할 수 있나요? 관련 정보를 확인한 결과 는 시작 위치를 지정할 수 없다는 것을 알게 되었습니다. 나중에 인터넷에서 그림을 사용하여 구현한 코드를 발견했는데, 그림을 텍스트로 변경한 후 원하는 기능을 성공적으로 구현했습니다. 코드는 다음과 같습니다.

<style type="text/css"> #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} #gongao #scroll_begin, #gongao #scroll_end{display:inline} </style> <div id="gongao"> <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> <div id="scroll_begin"> </div> ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} <div id="scroll_end"> </div> </div> </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

여기 ${affiche.content }는 데이터베이스에서 가져온 텍스트입니다.

이렇게 여러 번 반복되는 텍스트가 scroll_begin의 div에 기록되는 이유는 이 텍스트의 길이가 scroll_div의 div 컨테이너보다 커야 하기 때문입니다. div보다 작으면 스크롤 효과가 없습니다. 즉, 원활한 스크롤을 위해서는 콘텐츠의 전체 너비가 컨테이너 너비보다 커야 합니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：Js에서 상자를 팝업하고 value_javascript 기술을 반환하는 두 가지 일반적인 방법다음 기사：Js에서 상자를 팝업하고 value_javascript 기술을 반환하는 두 가지 일반적인 방법

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved