JavaScript는 좌우 control_javascript 기술로 원활한 스크롤을 구현합니다.

끊김 없는 스크롤링은 프로젝트에서 자주 사용되는 특수 효과입니다. 인터넷에 샘플 코드도 많이 있습니다. 여기서 공유하는 것은 호환성이 좋은 비교적 간단하고 실용적인 코드입니다. .

html 코드:

코드 복사 코드는 다음과 같습니다.

html>
head lang="ko">
meta charset="UTF-8">
title>끊김 없는 스크롤title>
script src="js/0010.js">script>
link rel="stylesheet" type="text/css" href="css/0010.css" />
헤드>
본문>
a href="javascript:">왼쪽으로 이동a>
a href="javascript:">오른쪽으로 이동a>
div id="div1">
> ~ ~ ~ ~ > div>
본문>
html>



CSS 코드

코드 복사

코드는 다음과 같습니다. *{ 여백:0; 패딩: 0; }

#div1{

오버플로: 숨김;
배경: 파란색;
위치: 친척;
너비: 600px;
높이: 150px;
여백: 100px 자동;
}
#div1 ul{
위치: 절대;
왼쪽: 0px;
상단: 0px;
목록 스타일: 없음;
}
#div1 ul li{
부동: 왼쪽;
}
#div1 ul li img{
너비:150px;
높이:150px;
}



js: 코드

코드 복사

코드는 다음과 같습니다.

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var 타이머=null;
var speed=2;//스크롤 속도 및 방향 제어
oUl.innerHTML=oUl.innerHTML oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';
타이머=setInterval(move,30);
oDiv.onmouseover=function(){//mouseover 임시
        clearInterval(타이머);
};
oDiv.onmouseout=function(){//마우스를 놓고 계속 스크롤
        타이머=setInterval(move,30);
}
Document.getElementsByTagName('a')[0].onclick=function(){
속도=-2;
}
Document.getElementsByTagName('a')[1].onclick=function(){
속도=2;
}
move() 함수{//그림 스크롤
If(oUl.offsetLeft               oUl.style.left=0;
}
If(oUl.offsetLeft>0){
              oUl.style.left=-oUl.offsetWidth/2 'px';
}
oUl.style.left=oUl.offset왼쪽 속도 'px';
}
}

효과가 대단하지 않나요?