끊김 없는 스크롤링은 프로젝트에서 자주 사용되는 특수 효과입니다. 인터넷에 샘플 코드도 많이 있습니다. 여기서 공유하는 것은 호환성이 좋은 비교적 간단하고 실용적인 코드입니다. .
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 코드
코드 복사
#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.offsetWidth/2){
oUl.style.left=0;
}
If(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 'px';
}
oUl.style.left=oUl.offset왼쪽 속도 'px';
}
}
효과가 대단하지 않나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
