JS 그림 끊김없는 스크롤(간단하고 사용하기 쉬움)_javascript 기술

그대로 복사하시면 거의 수정 없이 사용 가능해요! 궁금한 점이 있으면 토론해 보세요

코드 복사 코드는 다음과 같습니다. 滚动代码 *{ margin:0; 패딩:0;} ul,li{ 목록 스타일:none;} .left_1{ 너비:500px; 높이:100px; margin:0 auto;} .left_1 ul{} .left_1 li{ float:left; 너비:120px; 높이:100px; 줄 높이:100px; 텍스트 정렬:중심;} .left_1 p{ 너비:50px; 그 100px; line-height:100px;} .left_1_i div{ 너비:100px; 높이:100px; 줄 높이:100px; 테두리:1px 솔리드 #e5e5e5; 여백-왼쪽:10px; padding-left:10px;} function scrollSZ(con_id,speed,direct){ var con,items,heightHalf ,heightAll; var 타이머; speed = parseInt(speed);//获取设置的速島参数 con = document.getElementById(con_id); con.style.overflow = "hidden" ; if(direct == "상단"){ direct = "상단"; }else if(direct == "하단"){ direct = "하단"; }else{ direct = "top"; }

con.innerHTML =con.innerHTML; con.innerHTML =con.innerHTML; items = getChildNodes(con) ; if(items.length return; } heightAll = 0; for(var i=0;i var numTop,numBottom; if (!!window.ActiveXObject){ numTop = items[i].currentStyle["marginTop"]; numBottom = items[i].currentStyle["marginBottom "]; }else{ numTop = document.defaultView.getCompulatedStyle(items[i],null)["marginTop"]; numBottom = document.defaultView.getCompulatedStyle(items[i],null )["marginBottom"]; } numTop = parseInt(numTop); numBottom =parseInt(numBottom); numTop = numBottom; if(numTop >0){ heightAll = numTop; } heightAll = items[i].offsetHeight; } heightHalf = heightAll/2; if(direct == "bottom"){ con.scrollTop = heightHalf; 타이머 = setInterval(_scrollBottom,speed); }else if(direct == "top"){ 타이머 = setInterval(_scrollTop,speed); } con.onmouseover = function(){ if(타이머){ clearInterval(timer); 타이머 = null; } }; con.onmouseout = function(){ if(!timer){ if(direct == "top"){ 타이머 = setInterval(_scrollTop,speed); }else if(direct == "bottom"){ 타이머 = setInterval(_scrollBottom,speed); }

} }; function _scrollTop(){ if(con.scrollTop con.scrollTop = 2; }else{ con.scrollTop = 0; } } function _scrollBottom(){ if(con.scrollTop > 0){ con.scrollTop -= 2; } else{ con.scrollTop = heightHalf; } } } function scrollSP(con_id,speed,direct){ var con,innerCon,timer,items,widthAll, widthHalf; speed = parseInt(speed); con = document.getElementById(con_id); con.style.overflow = "hidden"; items = getChildNodes(con); if(items.length == 1){ innerCon = 항목[0]; }else{ return; } innerCon.innerHTML = innerCon.innerHTML; innerCon .innerHTML = innerCon.innerHTML; items = getChildNodes(innerCon); if(items.length return; } widthAll = 0; for( var i=0;i<items.length;i ){

}

for(var i=0;i var numLeft,numRight ; if (!!window.ActiveXObject){ items[i].style.styleFloat = "left"; numLeft = items[i].currentStyle["marginLeft"]; numRight = 항목[i].currentStyle["marginRight"]; }else{ 항목[i].style.cssFloat = "왼쪽"; numLeft = document.defaultView.getCompulatedStyle(items[i] ,null)["marginLeft"]; numRight = document.defaultView.getCompulatedStyle(items[i],null)["marginRight"]; } numLeft = parseInt(numLeft); numRight = parseInt(numRight); numLeft = numRight; if(numLeft>0){ widthAll = numLeft; } widthAll = 항목[i].offsetWidth; } widthHalf = widthAll/2; innerCon.style.width = widthAll "px"; if(direct == "left"){ direct = "left"; }else if(direct == "오른쪽"){ direct = "오른쪽"; }else{ direct = "왼쪽" } if(direct == "왼쪽"){ 타이머 = setInterval(_scrollLeft,speed); }else if(direct == "right"){ con.scrollLeft = widthHalf; 타이머 = setInterval(_scrollRight,speed); } con.onmouseover = function(){ if(타이머){ clearInterval(timer); 타이머 = null; } } con.onmouseout = function(){ if(direct == "left"){ 타이머 = setInterval(_scrollLeft,speed); }else{ 타이머 = setInterval(_scrollRight,speed); } } function _scrollLeft(){

if(con.scrollLeft con.scrollLeft = 2; }else{ con.scrollLeft = 0; } } function _scrollRight(){ if(con.scrollLeft>0){ con.scrollLeft -= 2; }else{ con.scrollLeft = widthHalf; } } } function getChildNodes(obj){//获取元素子节点 var childList,list; childList = new Array() ; list = obj.childNodes; for(var i=0;i if(list[i].nodeType == 1) childList[childList .length] = list[i]; } return childList; } 1

&lt ;p>2

3

4

b scrollSP("left_1",10,"right");