javascript: Interruption_javascript 기술 없이 텍스트를 왼쪽으로 이동하는 예제 코드

코드 복사 코드는 다음과 같습니다. ;!-- //주요 스크롤 기능 //스크롤 효과가 정확히 필요한 경우 //그러면 이 함수를 직접 호출하기만 하면 됩니다 var moveTag=function( obj) { var _this = this; _this.speed = 10;//이동 속도 _this.space = 10 * _this.speed;//이동 간격 시간 obj.scrollLeft =0;/ /스크롤 위치 초기화(주로 FF와의 호환성 필요성 고려) var divList = obj.getElementsByTagName("DIV"); var obj2 = new Object();//모든 스크롤 열 포함 div for(var i=0;i if(divList[i].parentNode==obj){ obj2=divList[i] break; 🎜>} } //스크롤해야 하는 모든 열 가져오기 //divList를 두 번 반복하는 목적은 스타일 이름이 스크롤 코드에 영향을 미치지 않도록 하는 것입니다 //즉, 스크롤 코드와 스타일 이름의 결합을 최대한 줄입니다. var cellCount = 0 _this.cellList = new Array() for(var i=0;i if(divList[i].parentNode==obj2){ cellCount ; _this.cellList.push(divList[i]);//스크롤해야 하는 모든 열 } } _this.resetCellList=function(){ //주로 연속 스크롤을 위한 함수입니다 //끝점까지 스크롤할 때마다 사용해야 합니다 / /이미 스크롤된 열 재설정 현재 열 뒤로 이동 for(var i=0;i obj2.removeChild(_this.cellList[i]); 🎜>obj2.appendChild( _this.cellList[i]); } //_this.cellList _this.cellList = new Array() for(var i=0;i&lt ;divList.length ;i ){ if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]) } //alert(_this.cellList. length); } _this.resetForMoveRight=function(){ //이 함수는 주로 연속 스크롤에 사용됩니다. //resetCellList와의 차이점은 이 함수는 연속 스크롤에 사용된다는 점입니다. 오른쪽 //시작점으로 스크롤할 때마다 을 사용해야 합니다.//현재 열 뒤의 모든 열을 현재 열 앞으로 이동 if(_this.cellList.length>0){ for( var i=_this.cellList.length-1;i>0;i--){ obj2.removeChild(_this.cellList[i]) obj2.insertBefore(_this.cellList) [i],obj2 .childNodes[0]); } } //Reacquire _this.cellList _this.cellList = new Array() for(var i=0 ;i if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]) //alert(_this. cellList.length ) } //alert(_this.cellList.length); obj2.style.width = parsInt(obj.offsetWidth * cellCount) "px" // / /alert(_this.endScroll); var cellScroll = obj.offsetWidth;//매번 스크롤할 거리 var endScroll = obj2.offsetWidth - cellScroll;//그림의 끝 위치를 계산합니다. 스크롤 바 //alert(_this.cellScroll); // _this.moveLength = cellScroll; //이동 오프셋을 초기화합니다. 0이면 페이지가 로드된 후 즉시 이동합니다. _this.cellScroll과 동일 시작 전 잠시 실행을 지연함을 나타냅니다. _this.scrollEnd = false; _this.scrollTimes = 0 //휴식을 취하세요 _this.sleep=function() { _this.scrollTimes; if(_this.scrollTimes>=_this.space){ _this.scrollTimes=0; _this.moveLength=0; _this.moveStart = true ;//이동 시작 여부 _this.isMoveLeft = true;//왼쪽으로 이동 여부 _this.move=function(){ obj.onmouseover=function( ){ _this.moveStart= false; }; obj.onmouseout=function(){ _this.moveStart=true //셀 목록 재설정 if(obj.scrollLeft> =endScroll && _this.isMoveLeft){//왼쪽으로 이동하여 끝으로 이동했습니다 if(_this.moveLength > 0) _this.moveLength = cellScroll;//Adjust if(_this.cellList.length&gt ;0){ _this.resetCellList();//cellList 업데이트 obj.scrollLeft=0 }else{ _this.scrollEnd = true; 🎜>} }else if(obj.scrollLeft if(_this.moveLength > 0) _this.moveLength = cellScroll;//조정 if(_this.cellList.length>0){ _this.resetForMoveRight();//cellList 업데이트 obj.scrollLeft=endScroll;else{ _this.scrollEnd = false; } } // if(_this.scrollEnd){//왼쪽으로 이동 if(_this.moveLength obj.scrollLeft-- ; _this.moveLength ; }else if(_this.moveLength>=cellScroll){ _this.sleep()} else{//오른쪽으로 이동 if(_this.moveLength obj.scrollLeft ; _this.moveLength }else if(_this.moveLength>=cellScroll ){ _this.sleep(); } } //자동으로 _this.start=function(){ setInterval(_this.move, _this.speed) }; //오른쪽으로 이동 _this.moveRight=function(){ _this.scrollEnd = true;//끝까지 스크롤됨 _this.isMoveLeft = false;//오른쪽으로 스크롤 _this.scrollTimes=0; }; //왼쪽으로 이동 _this.moveLeft=function(){ _this.scrollEnd = false;//끝까지 스크롤하지 않음 _this. isMoveLeft = true; //왼쪽으로 스크롤 } // --> ="Content-Type" content="text/html; charset=gb2312" /> #list{border:#ccc 1px solid;} # list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} #list{width:150px;height:30px;overflow:hidden;}/*필수 속성, 너비와 높이는 사용자 정의 가능*/ #list div div{width:150px;height:30px;float:left;}/*필수 속성, 너비 및 높이는 #list와 동일해야 합니다*/ - -> #list{border:#ccc 1px solid;} #list div div{line-height:30px;text-align :center;border -right:#ccc 1px solid;} #list{width:150px;height:30px;overflow:hidden;}/*필수 속성, 너비 및 높이는 사용자 정의 가능*/ # list div div{width :150px;height:30px;float:left;}/*필수 속성, 너비 및 높이는 #목록 정의와 동일해야 합니다*/ 제목 없음 Document 🎜> 두 번째 열 세 번째 열 네 번째 열 다섯 번째 열 왼쪽으로 이동 오른쪽으로 이동 var move=new moveTag(document.getElementById("list")); move.start(); move .speed=10;//스크롤 속도, 기본값은 10 // move.space=0;//스크롤 간격 시간, 기본값은 스크롤 속도 * 16 //왼쪽 이동은 가장 왼쪽으로만 이동할 수 있으며 왼쪽으로 완전히 이동할 수는 없습니다 //순서대로 중단 없이 스크롤하려면 가장 왼쪽 좌표가 계속 변경됩니다 //move.moveLeft();//이 방법으로 기본 이동을 오른쪽에서 왼쪽으로 설정할 수 있습니다 //move.moveRight();// move.moveLeft()와 반대 방향 var moveLeft=move.moveLeft; var moveRight=move.moveRight; //N개 위치에 스크롤이 있는 페이지를 원하시나요? //문제없어요! 이를 달성하려면 몇 가지 새로운 인스턴스가 더 필요합니다