이 글은 페이지 요소의 동적 작동을 달성하기 위해 시간 함수 타이밍 트리거링과 결합된 자바스크립트 관련 기술을 포함하여 JS에서 구현한 간헐적 텍스트 순환 스크롤 효과를 주로 소개합니다. 이 글이 도움이 되기를 바랍니다. 모든 사람.
구체적인 코드는 다음과 같습니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> - 间歇循环滚动</title> <style> #box{ height:240px; width:300px; margin:0 auto; border:1px solid #0066FF; overflow:hidden; padding-bottom:20px; } #box li{ color:#333; height:24px; } #box ul{ margin:0; padding:0; } </style> </head> <body> <p id="box"> <ul id="con1"> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> <li>php中文网</li> </ul> </p> <script> var area=document.getElementById("box"); area.innerHTML+=area.innerHTML; var liHeight=24; area.scrollTop=0; var delay=2000; var speed=50; var time; function starMove(){ area.scrollTop++; time=setInterval("scrollUp()",speed); } function scrollUp(){ if(area.scrollTop%liHeight==0){ clearInterval(time); setTimeout("starMove()",delay); }else{ area.scrollTop++; if(area.scrollTop>=area.offsetHeight/2){ area.scrollTop=0; } } } setTimeout("starMove()",delay); </script> </body> </html>
관련 권장 사항:
html+css+javascript 목록 루프 스크롤 구현 방법
JS를 사용하여 한 줄씩 텍스트 루프 스크롤 효과를 구현하는 실제 예 Pause
위 내용은 JS는 텍스트의 간헐적인 스크롤을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!