script.aculo.us-시각 효과
script.aculo.us 효과는 두 그룹으로 나뉩니다.
핵심 효과
다음 6 가지 핵심 효과는 script.aculo.us Visual Effects JavaScript 라이브러리의 기초입니다.
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
모든 핵심 효과는 다양한 공통 매개 변수와 효과 별 매개 변수를 지원하며 이러한 효과 이름은 대소 문자를 구분합니다.
이 튜토리얼에서는 모든 효과 별 공통 매개 변수 에 대해 효과와 함께 설명했습니다.
조합 효과
모든 조합 효과는 5 가지 핵심 효과를 기반으로하며 자신 만의 효과를 작성할 수 있도록 예제로 생각됩니다.
일반적으로 이러한 효과는 다른 효과의 병렬 동기화 실행에 의존합니다. 이러한 실행은 쉽게 사용할 수 있으므로 자신 만의 결합 효과를 만드는 것은 매우 쉽습니다. 다음은 조합 효과 목록입니다.
Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink
또한 Effect.toggle 표시 / 페이드, 슬라이드 또는 블라인드 애니메이션으로 일시적으로 표시하려는 요소에 대한 유틸리티 방법.
Effect.toggle
효과에 필요한 라이브러리 파일
script.aculo.us의 효과 기능을 사용하려면 효과 모듈을로드해야합니다. 따라서 script.aculo.us에 대한 최소로드는 다음과 같습니다.
<html>
<head>
<title>script.aculo.us effects</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/"effects.j"></script>
</head>
<body>
...
</body>
</html>
통화 효과 기능
핵심 효과를 시작하는 적절한 방법은 일반적으로 new운영자. 선호도에 따라 두 가지 구문 중 하나를 사용할 수 있습니다.
통사론
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])
이 두 구문은 기술적으로 동일합니다. 둘 중 하나를 선택하는 것은 주로 코드 미학에 대한 개인적인 감각에 관한 것입니다.
예
여기에 두 개의 동등한 호출이 있으므로 구문이 어떻게 관련되어 있는지 볼 수 있습니다.
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });