>위챗 애플릿 >미니 프로그램 개발 >JS 텍스트의 간헐적인 순환 스크롤 효과를 얻는 방법

JS 텍스트의 간헐적인 순환 스크롤 효과를 얻는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-03-17 15:38:492544검색

이번에는 JS 텍스트의 간헐적 순환 스크롤 효과를 구현하는 방법을 보여 드리겠습니다. JS 텍스트의 간헐적 순환 스크롤 효과를 구현하기 위한 주의사항은 무엇입니까?

구체적인 코드는 다음과 같습니다.

nbsp;html>


<meta>
<title>www.jb51.net - 间歇循环滚动</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>


<p>
  </p>
        
  • PHP1
  •     
  • PHP2
  •     
  • PHP3
  •     
  • PHP4
  •     
  • PHP5
  •     
  • PHP6
  •     
  • PHP7
  •     
  • PHP8
  •     
  • PHP9
  •   
<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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 모션 버퍼링 효과의 캡슐화 기능 사용 방법

JavaScript 비동기 로딩에 대한 자세한 설명

위 내용은 JS 텍스트의 간헐적인 순환 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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