js 텍스트 스크롤 effect_javascript 기술에 대한 간략한 분석
- WBOY원래의
- 2016-05-16 18:26:271215검색
이 효과가 향후 웹 개발에서 일반적으로 사용될지, 디자이너가 여전히 선호하는지 여부는 기술적인 관점에서 가장 중요하지 않습니다. 구현 원리를 이해하는 것은 자신의 프런트 엔드 기술을 향상시키는 데 큰 영향을 미칩니다. 세상은 근원 없이는 변하지 않습니다. 그 작동 규칙을 익히면 그 화려한 외관에 속지 않을 것입니다. 그 규칙을 익히는 것을 전제로 관련 기술을 사용하여 새로운 효과를 만들어 낼 수도 있습니다. 구현 프로세스를 살펴보겠습니다.
1.html
코드 복사 코드는 다음과 같습니다. 다음과 같습니다:
-
- 두 번째 줄
- 세 번째 줄
2.css
코드 복사 코드는 다음과 같습니다. .box{
width:150px height:25px; line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0}
.box li{
높이:25px;
글꼴 크기:12px;
목록 스타일 유형:없음
3.js
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0}
.box li{
높이:25px;
글꼴 크기:12px;
목록 스타일 유형:없음
3.js
코드 복사
코드는 다음과 같습니다
function startmarquee(lh,speed,delay,index){ /* 함수 startmarquee 매개변수: lh: 한 번에 위로 스크롤되는 텍스트의 거리 또는 높이. speed: 스크롤 속도;
delay: 스크롤 일시 중지 시간 간격; index: 캡슐화된 함수는 페이지의 다양한 요소에 적용될 수 있습니다. 🎜>var p=false;
var o=document.getElementById("marqueebox" index);
//문서의 스크롤 영역 개체를 가져와서 변수 o에 할당합니다. o.innerHTML; //객체의 실제 내용은 두 개의 ul을 포함하는 복사본입니다. 물론 li 태그도 3줄에서 6줄로 변경되었습니다. 복사의 목적은 텍스트에 대한 전환을 제공하는 것입니다. 중단 없이 위쪽으로 스크롤합니다.
o.onmouseover=function(){p=true}
//마우스가 미끄러져 스크롤을 멈춥니다.
o.onmouseout=function(){p=false}
//마우스 스크롤 시작; p가 true인지 false인지는 아래 start() 함수 실행에 직접적인 영향을 미칩니다.
o.scrollTop = 0
//텍스트 콘텐츠 상단 사이의 거리; 스크롤 영역의 경우 초기 값은 0입니다.
function start(){
t=setInterval(scrolling,speed); //가끔 setInterval은 더 큰 스크롤 기능을 실행합니다.
if(!p){ o.scrollTop = 1;}
//전달된 부울 값에 따라 스크롤이 중지되거나 시작됩니다. p;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//나누기가 불가능한 경우, 즉 한 번의 위로 이동하는 높이는 lh에 도달하지 않으면 콘텐츠가 계속 위로 스크롤됩니다.
o.scrollTop = 1
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; 객체 o에서 이전에 한 번 복사되었으므로 스크롤 높이가 실제로는 원래 내용입니다. 이중 높이
내용이 scrollHeight/2 높이까지 스크롤되면 텍스트 세 줄이 모두 한 번 표시되고 전체 내용이 표시됩니다. content
scrollTop은 0으로 반환됩니다. 다음 스크롤이 텍스트에 도달할 때까지 기다립니다. 지속적인 위쪽 스크롤의 효과
}else{
clearInterval(t)>//그렇지 않으면 t 및 스크롤 일시 중지
setTimeout(start,delay);
//지연 간격 이후 start()를 시작하고 스크롤을 계속합니다.
}
}
setTimeout(start,delay); >//처음으로 스크롤을 시작합니다. setTimeout은 일정 시간이 지나면 start() 함수를 실행하며 한 번만 실행됩니다.
}
//매개변수 전달
startmarquee(25,30,3000 ,0);//일시 중지 효과 사용
startmarquee(25,40,0,1 )
//계속
다음은 모두 코드입니다.
var o=document.getElementById("marqueebox" index);
//문서의 스크롤 영역 개체를 가져와서 변수 o에 할당합니다. o.innerHTML; //객체의 실제 내용은 두 개의 ul을 포함하는 복사본입니다. 물론 li 태그도 3줄에서 6줄로 변경되었습니다. 복사의 목적은 텍스트에 대한 전환을 제공하는 것입니다. 중단 없이 위쪽으로 스크롤합니다.
o.onmouseover=function(){p=true}
//마우스가 미끄러져 스크롤을 멈춥니다.
o.onmouseout=function(){p=false}
//마우스 스크롤 시작; p가 true인지 false인지는 아래 start() 함수 실행에 직접적인 영향을 미칩니다.
o.scrollTop = 0
//텍스트 콘텐츠 상단 사이의 거리; 스크롤 영역의 경우 초기 값은 0입니다.
function start(){
t=setInterval(scrolling,speed); //가끔 setInterval은 더 큰 스크롤 기능을 실행합니다.
if(!p){ o.scrollTop = 1;}
//전달된 부울 값에 따라 스크롤이 중지되거나 시작됩니다. p;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//나누기가 불가능한 경우, 즉 한 번의 위로 이동하는 높이는 lh에 도달하지 않으면 콘텐츠가 계속 위로 스크롤됩니다.
o.scrollTop = 1
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; 객체 o에서 이전에 한 번 복사되었으므로 스크롤 높이가 실제로는 원래 내용입니다. 이중 높이
내용이 scrollHeight/2 높이까지 스크롤되면 텍스트 세 줄이 모두 한 번 표시되고 전체 내용이 표시됩니다. content
scrollTop은 0으로 반환됩니다. 다음 스크롤이 텍스트에 도달할 때까지 기다립니다. 지속적인 위쪽 스크롤의 효과
}else{
clearInterval(t)>//그렇지 않으면 t 및 스크롤 일시 중지
setTimeout(start,delay);
//지연 간격 이후 start()를 시작하고 스크롤을 계속합니다.
}
}
setTimeout(start,delay); >//처음으로 스크롤을 시작합니다. setTimeout은 일정 시간이 지나면 start() 함수를 실행하며 한 번만 실행됩니다.
}
//매개변수 전달
startmarquee(25,30,3000 ,0);//일시 중지 효과 사용
startmarquee(25,40,0,1 )
//계속
다음은 모두 코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.