JavaScript 운동 함수 패키지

19626 단어 하나.JavaScript
1. JavaScript 운동 함수 패키지
상용 매개 변수 설명:
  • dom (object): dom 요소, document. getElementsByTagName 등 을 통 해 얻 은 요소
  • target (number): 운동 의 목표 수치
  • speed (number): 등 속 운동 의 속도
  • arr (string): 수정 해 야 할 속성 명
  • parmobj (object): 수정 해 야 할 매개 변수 대상 목록
  • 1. 등 속 운동 함수 패키지
    	function uniformSpeed(dom,target,speed){
    		clearInterval(dom.timer);
    		//   1:
    		var iSpeed = target - dom.offsetLeft > 0 ? speed:-speed;
    		dom.timer = setInterval(function(){
    			//   :2:
    			if(Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)){
    				dom.style.left= target +'px';
    				clearInterval(dom.timer);
    			}else{
    				dom.seyle.left = dom.offsetLeft + iSpeed +'px'; 
    			}
    		},30)		
    	}
    
  • 우선 우리 가 주의해 야 할 것 은 iSpeed 의 값 입 니 다. target 의 값 이 요소 의 현재 값 보다 클 때 우 리 는 플러스, 즉 왼쪽으로 이동 하고 그렇지 않 으 면 오른쪽으로 이동 합 니 다.
  • 그 다음 에 우리 가 주의해 야 할 것 은 판단 조건 이다. 우리 가 들 어 오 는 매개 변수 속도 치 는 기괴 할 수 있 기 때문에 목표 치 를 완벽 하 게 누적 할 수 없 기 때문에 우리 가 판단 하 는 임계값 은 목표 치 에서 현재 치 를 빼 고 속도 가 적 으 면 원 소 를 목표 치 에 직접 도달 하 는 것 이다.
  • 그리고 우리 가 특별히 주의해 야 할 것 은 dom. timer 의 쓰기 입 니 다. 여러 요소 가 동시에 실 행 될 때 다른 요소 의 타이머 상황 을 제거 하 는 것 을 방지 하기 위해 서 입 니 다
  • 2. 감속 (완 속) 운동
    	function decelerationSpeed(dom,target){
    		clearInterval(dom.timer);
    		dom.timer = function(){
    			var iSpeed = (target - dom.offsetLeft)/7;
    			//   1:
    			iSpeed = iSpeed > 0 ? Math.ceil(iSpedd) : Math.floor(iSpeed);
    			if(target == dom.offsetLeft){
    				clearInterval(dom.timer);
    			}else{
    				dom.style.left = dom.offsetLeft + iSpeed + 'px';	
    			}
    		}
    }
    
  • 여기 서 우 리 는 속도 의 계산 방법 에 특별히 주의해 야 한다. 왜냐하면 우리 가 감속 운동 을 할 때 목표 치 를 현재 치 에서 7 로 나 누 어 얻 은 것 이기 때문에 그 가 매번 얻 는 것 은 정수 가 아니다. 이것 은 바로 요소 의 이동 거리 가 목표 치 에 도달 하지 못 하 는 상황 이다.css 는 작은 숫자 를 렌 더 링 할 때 297.12 와 같은 숫자 를 297 로 렌 더 링 하여 우리 의 목표 치 를 300 px 라 고 가정 합 니 다. 마지막 으로 이동 할 때 요소 의 left 값 이 297.429 라 고 가정 하면 css 는 그 가 297 이 라 고 생각 하기 때문에 목표 치 는 현재 값 을 300 - 297 = 3 으로 줄 입 니 다. 그리고 다음 이동 속도 인 iSpeed = 3 / 7 = 0.428 입 니 다.그러면 다음 요소 의 left 의 수 치 는 297 + 0.428 = 297.428 이기 때문에 이때 그 는 순환 에 빠 졌 다. 그러면 이때 우리 가 해 야 할 일 은 위로 정 리 를 하 는 것 이다. 정수 일 때 우 리 는 위로 정 리 를 하 는 것 이다. 사실은 마지막 속도 가 거의 1 이 고 이때 우리 의 목표 치 를 정확하게 달성 할 수 있다.

  • 3. 투명도 운동
    	//        
        function getStyle(dom, arr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[arr];
            } else {
                return dom.currentStyle[arr]; //       IE 
            }
        }
    	function startMove(dom,target){
            clearInterval(timer);
            timer = setInterval(function(){
                var  iCur = parseFloat(getStyle(dom,'opacity')),//          
                     iSpeed = ((target -iCur)/7)*100;//   1:
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed):Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(timer);
                }else{
                    dom.style.opacity = iCur + iSpeed/100;//   2:
                }
            },30)
        }
    
  • 투명도 속성 이 비교적 특별 하기 때문에 그 는 수치 뒤에 픽 셀 을 넣 지 않 기 때문에 우 리 는 단독으로 꺼 내 처리한다.
  • 투명도 의 값 이 [0, 1] 이기 때문에 우 리 는 매번 의 변화 치 인 ispeed 를 100 으로 곱 해 야 한다. 곱 하지 않 으 면 위로, 아래로 조정 하면 바로 1 또는 - 1 이 고 투명 도 는 범 위 를 초과 한다
  • .
    4. 종합 운동 (다 물체 다 상태 & & 리 턴 함수)
    	function startMove(dom, arrobj, callback) {
            clearInterval(dom.timer);
            dom.timer = setInterval(function() {
                var iSpeed = null,
                    iCur = null,
                    stopFlag = true;
                for (var arr in arrobj) {
                    iCur = parseFloat(getStyle(dom, arr));
                    if (arr === 'opacity') {
                        iSpeed = (arrobj[arr] - iCur) / 7 * 100;
                    } else {
                        iSpeed = (arrobj[arr] - iCur) / 7;
                    }
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    
                    if (arr === 'opacity') {
                        dom.style.opacity = iCur + iSpeed / 100;
                    } else {
                        dom.style[arr] = iCur + iSpeed + 'px';
                    }
                    if(iCur != arrobj[arr]){
                        stopFlag = false;
                    }
    
                }
                if (stopFlag) {
                    clearInterval(dom.timer);
                    typeof callback == 'function' && callback();
                }
            }, 30)
        }
    
    
    

    좋은 웹페이지 즐겨찾기