JavaScript 그라데이션 효과 페이지 이미지 제어 페이지 1/2_페이지 배경

이 프로그램을 사용하여 크기 변경, 위치 변경, 페이드 인 및 페이드 아웃 등을 포함한 다양한 일반적인 애니메이션 효과를 얻을 수 있습니다.
프로그램 설명: 그라데이션 효과의 원리는 타이머를 사용하여 지속적으로 값을 설정하는 것입니다. 효과 속도를 늦추려면 단계 크기를 설정하세요(자세한 내용은 JavaScript 스프링 효과 참조).
여기에서는 그라데이션이 될 수 있는 속성(투명도, 너비, 높이, 왼쪽, 위쪽)을 통합하고 동일한 그라데이션 시리즈(단계)를 사용하여 그라데이션을 동기화하여 동시에 여러 속성 그라데이션 효과를 형성합니다. .
다음이 유용한 곳입니다:
[최종 스타일]
최종 스타일은 자바스크립트 이미지 자르기 효과의 측면 너비 획득에서도 언급되며, 너비는 높이를 계산할 때 먼저 최종 스타일에서 테두리 너비를 빼야 합니다.
여기에서는 muxrwc를 사용하여 FF 아래에 currentStyle 메서드를 구현했습니다. 따라서 FF와 IE 모두 currentStyle에서 최종 스타일을 가져올 수 있습니다.

if(!isIE){ 
HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
return this.ownerDocument.defaultView.getComputedStyle(this, null); 
}); 
}

이를 사용하여 테두리 너비를 가져옵니다.

this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); } 
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }

[너비 또는 높이 우선]
너비 또는 높이 우선은 실제로 그라디언트 중 하나를 먼저 실행하고 완료 후 다른 그라디언트를 실행하는 것을 의미합니다.
그라디언트 프로그램에서 그라디언트를 실행하면 그라디언트가 완료되었는지 여부를 나타내는 bool 값이 반환됩니다.

this.SetWidth() && this.SetHeight();

&&의 특성상, this.SetWidth()는 true를 반환합니다. 그런 다음에만 this.SetHeight()가 실행됩니다. 이 역시 좋은 기술입니다.
동시에 그라디언트를 동기화하기 위해 다른 그라디언트는 단계 크기의 두 배를 사용합니다.

this.Step = 2*this.Step; 
this.SetOpacity(); this.SetTop(); this.SetLeft(); 
this.Step = this.Step/2;

이렇게 하면 너비 또는 높이 우선 순위의 효과를 얻을 수 있습니다.
[고정점 그라데이션]
먼저 원리부터 이야기해 보겠습니다. 예를 들어 너비의 중간점을 기준점으로 사용하면 너비가 n만큼 감소한다고 상상할 수 있습니다. 왼쪽이 n*0.5만큼 증가하는 한(예: n/2 ),
그러면 중간점을 중심으로 변형 효과를 만들 수 있습니다(물론 먼저 변형 개체를 상대 또는 절대 위치 지정으로 설정해야 합니다).
그럼 이 '0.5'는 어디서 나온 걸까요? 수학적 지식이 있으신 분이라면 그라디언트 객체의 왼쪽과 변형점의 비율과 그라디언트 객체의 전체 너비라는 것을 아셔야 합니다
Width.pos를 사용하여 이 값을 프로그램에 저장하고, 그리고 변환 전 변환점의 위치를 ​​계산합니다:

this ._x = this._obj.offsetLeft this._obj.offsetWidth * this.Width.pos
각 변환은 이 위치에 따라 왼쪽으로 재설정됩니다. width:

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos "px";

이것이 아니라고 말하는 사람들도 있습니다. 원본 왼쪽을 기준으로 변환 너비 *Width.pos를 직접 추가하는 것과 동일합니까?
그러나 문제는 여러 번의 변환 계산 후에 얻은 값(목표 값에 도달하기 전에 여러 번의 계산이 있을 것임)이 더 이상 정확하지 않다는 것입니다.
변환 계산 과정에서 소수점 이하 자릿수는 무시되고, 계산 횟수가 늘어날수록 결과의 차이가 커지기 때문입니다.
그래서 변환 위치 기준 값(_x)을 먼저 결정하므로, 변환 위치를 몇 번이나 계산하더라도 변환 위치는 동일하지 않습니다.

마찬가지로 서로 다른 Width.pos(음수 및 1보다 큰 숫자 포함)와 Height.pos를 설정하는 한 그라데이션을 원하는 지점의 중앙에 배치할 수 있습니다.

또한, 통합을 개선하기 위해 프로그램 설계에 많은 고민을 했으며, 실행, 시작, 종료 및 대상 속성이 각각 다음과 같은 FadeStruct 구조를 만들었습니다. 그라데이션, 시작 값 및 끝 값, 목표 값입니다.
기본값을 설정하기 위해 Object.extend를 두 번 사용했습니다. 자세한 내용은 프로그램을 참조하세요.
사용 지침:
그라데이션 개체인 필수 매개변수는 하나만 있습니다. 그러나 그라데이션 개체만 효과가 없습니다.
불투명도: 투명 그라데이션 매개변수
높이: 높이 그라데이션 매개변수
너비: 너비 그라데이션 매개변수
위: 위쪽 그라데이션 매개변수
왼쪽: 왼쪽 그라데이션 매개변수
단계:10,//변화율
시간 :10,//간격 변경
모드: "both",//그라디언트 순서
Show:false,//기본적으로 열려 있는지 여부
onFinish:function(){}//완료되면 실행
여기서 Opacity, Height, Width, Top 및 Left는 FadeStruct 구조입니다. 이 객체는 예제에서 인스턴스화됩니다.

var f = new Fade("idFade", { Show: true, 
Opacity: { run: true }, 
Height: { run: true }, 
Width: { run: true, pos: .5 }, 
Top: { run: true, end: 70 } 
});

실행을 true로 설정하면 이 변환이 시작됩니다. 및 end는 시작 및 끝 값입니다. pos Height 및 Width의 고유한 변환 위치 속성입니다.

자세한 적용방법은 예시를 참고해주세요.
프로그램 코드: