원활한 스크롤이 가능한 js 코드는 이해하기 쉽습니다(자체 작성)_javascript 기술

复代码 代码如下:

<머리>


<스타일>
*{패딩:0; 여백:0;}
ul{ 목록 스타일: 없음;}
#div{ 너비:300px; 높이:100px; 여백:100px 자동; 테두리:1px 솔리드 #ff0000; 위치:상대적; 오버플로:숨김;}
#div ul{ 위치:절대; 높이:100px; 왼쪽:0;}
#div ul li{ 너비:300px; 높이:100px; 줄 높이:100px; 텍스트 정렬:가운데; float:왼쪽}

<스크립트>
window.onload=function(){
var oDiv=document.getElementById("div");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");
var oInput=document.getElementsByTagName('input');
oUl.innerHTML =oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length "px";
var iSeep=-2;
var tamer=null;
clearInterval(tamer);
function starMove(){
tamer=setInterval(function(){
oUl.style.left=oUl.offsetLeft iSeep "px";
if(-oUl.offsetLeft >= oUl. offsetWidth/2){
oUl.style.left="0px";
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 "px" ;
}
},30)
}
starMove();
oDiv.onmouseover=function(){
clearInterval(tamer);
}
oDiv.onmouseout=function(){
starMove();
}
oInput[0].onclick=function(){
iSeep=-2;
}
oInput[1].onclick=function(){
iSeep=2;
}
}


<본문>

• 1


• 2


• 3


• 4