페이지에서 뉴스의 간헐적이고 원활한 스크롤을 처리할 때 가장 일반적인 방법은 스크롤 영역의 내용을 복사하여 추가한 다음 스크롤 블록의 scrollTop을 제어하고 판단하여 스크롤 중지 효과를 얻는 것입니다.
실제로 많은 경우 노드 작업을 통해 간헐적으로 원활한 스크롤을 달성하는 것이 더 쉽습니다.
코드는 다음과 같습니다:
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
window.onload=함수(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///스크롤 메인 메소드
///매개변수:o 스크롤 블록 객체
///매개변수: d 각 스크롤의 높이
///매개변수: c 현재 스크롤 높이
함수 스크롤업(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}또 다른{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//Firefox에서 공백과 캐리지 리턴이 노드로 사용되는 문제 해결
함수 getFirstChild(노드){
동안(node.nodeType!=1)
{
node=node.nextSibling;
}
반환 노드;
}
</script>
<ul id="상자">
<li>· Xinhua Daily Telegraph: 음악 저작권료는 "대마 공"과 같습니다 </li>
<li>· 모던 익스프레스: 인간은 로봇과 결혼하여 아이를 가질 수 있을까? </li>
<li>·글로벌: 미국, 억만장자 클럽의 파산</li>
<li>· 모던 익스프레스: 니젠을 언론으로부터 침묵시키기 위해 그는 리가신의 러브레터를 팔고 싶었습니다</li>
<li>· 베이징 타임스: 베이징 항공우주대학교 학생들의 자체 제작 로켓이 하늘로 올라간다</li>
</ul>
효과:
코드 실행
<스타일 유형="텍스트/css">
<!--
*{여백:0px;}
#box{너비:300px; 높이:24px;overflow:hidden; 글꼴 크기:12px;
#box li{ 목록 스타일: 없음; 줄 높이: 24px;}
-->
</style>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
window.onload=함수(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
함수 스크롤업(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}또 다른{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
함수 getFirstChild(노드){
동안(node.nodeType!=1)
{
node=node.nextSibling;
}
반환 노드;
}
</script>
<ul id="상자">
<li>· Xinhua Daily Telegraph: 음악 저작권료는 "대마 공"과 같습니다 </li>
<li>· 모던 익스프레스: 인간은 로봇과 결혼하여 아이를 가질 수 있을까? </li>
<li>·글로벌: 미국, 억만장자 클럽의 파산</li>
<li>· 모던 익스프레스: 니젠을 언론으로부터 침묵시키기 위해 그는 리가신의 러브레터를 팔고 싶었습니다</li>
<li>· 베이징 타임스: 베이징 항공우주대학교 학생들의 자체 제작 로켓이 하늘로 올라간다</li>
</ul>