모션 프레임워크를 생성하기 위한 JavaScript 구현 코드_기본 지식

캡슐화된 모션 프레임워크 Move(obj,attr,iTarget)를 직접 호출할 수 있습니다.

너비, 테두리, 글꼴 크기, marginLeft, 불투명도 등과 같은 많은 공통 속성 값의 가변 속도 변경을 설정하여 다양하고 흥미로운 효과를 얻을 수 있습니다.

IE, FF와 호환됩니다.

코드 복사 코드는 다음과 같습니다.

/********************
*
* IE-BUG:
* IE에서는 opacity 속성을 설정할 때 opacity 속성을 설정해야 합니다. 요소 스타일에서 불투명도 값을 읽을 수 있습니다.
*
* obj: 요소 객체. attr: 따옴표로 묶인 속성 이름입니다. iTarget: 속성 대상 값입니다.
*
*****************/

function Move(obj,attr,iTarget){
clearInterval(obj.timer);//동일 객체에 대해 여러 Move()를 호출할 때 타이머 실패 문제를 해결하기 위해 이전 타이머를 닫습니다. 동시에 오버레이 문제. Obj.timer를 사용하여 Move()를 호출하는 각 객체에 자체 타이머를 제공하면 동시에 Move()를 호출할 때 여러 객체가 동일한 타이머를 사용하여 관련 간섭 문제를 일으키는 것을 방지할 수 있습니다.
obj.timer=setInterval(function(){
var cur=0;//매 순간 attr 속성의 값을 저장할 변수를 만듭니다.
if(attr=="opacity") {
                                                                                                                                                               FF를 사용하여 사용하여 불투명도를 사용하여 (parseFloat(getStyle(obj,attr))*100)을 정수로 변환
         }
          var 속도=(iTarget-cur)/10 ;//속성값의 가변 속도 변화를 구현하기 위해 감소하는 속도 속도 변수를 생성합니다
.
Speed=speed>0?Math.ceil(speed):Math.floor(speed);//브라우저가 1px 미만의 값을 무시하고 이동 종료가 발생하는 문제를 해결하기 위해 반올림합니다. 목표 값보다 몇 픽셀 부족합니다. Itarget Question

                                                                                                              ;//current cur 값에 감소하는 속도 값을 더한 speed

if(attr=="opacity"){

// IE 및 FF에 각각 불투명 속성 값

을 설정합니다. obj.style .filter="alpha(불투명도: " cur ")"; //IE
의 경우                                                                                                            . 지정된 속성 속성에 현재 속도에 값을 추가합니다
                                          > 에. obj: 요소 개체입니다. 이름: 속성 이름.
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];//for IE
}else{
return getCompulatedStyle(obj, false)[이름];//FF의 경우
}
}