js 슬라이딩 도어 효과 구현

이번에는 js 슬라이딩 도어 효과 구현을 가져오겠습니다. js 슬라이딩 도어 효과를 구현하기 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.

// JavaScript Document
function startMove(obj,json,endFn){
		clearInterval(obj.timer);		
		obj.timer = setInterval(function(){			
			var bBtn = true;			
			for(var attr in json){				
				var iCur = 0;			
				if(attr == 'opacity'){
					if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100);					
					}
					else{
						iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
					}	
				}
				else{
					iCur = parseInt(getStyle(obj,attr)) || 0;
				}				
				var iSpeed = (json[attr] - iCur)/8;
			iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				if(iCur!=json[attr]){
					bBtn = false;
				}				
				if(attr == 'opacity'){
					obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
					obj.style.opacity = (iCur + iSpeed)/100;
				}
				else{
					obj.style[attr] = iCur + iSpeed + 'px';
				}							
			}			
			if(bBtn){
				clearInterval(obj.timer);
				
				if(endFn){
					endFn.call(obj);
				}
			}			
		},30);	
	}	
	function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!

추천 자료:

js는 비밀번호 강도 확인을 위해 정규식을 사용합니다

js를 사용하여 라벨 클릭 전환 코드(코드 포함)를 구현합니다.

위 내용은 js 슬라이딩 도어 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!