script.aculo.us - Hiệu ứng hình ảnh

Các hiệu ứng script.aculo.us được chia thành hai nhóm -

Hiệu ứng cốt lõi

Sáu hiệu ứng cốt lõi sau đây là nền tảng của thư viện JavaScript script.aculo.us Visual Effects.

Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel

Tất cả các hiệu ứng cốt lõi hỗ trợ các thông số chung khác nhau cũng như các thông số cụ thể cho hiệu ứng và các tên hiệu ứng này có phân biệt chữ hoa chữ thường.

Tất cả các Tham số Chung dành riêng cho hiệu ứng đã được thảo luận trong hướng dẫn này cùng với các hiệu ứng.

Hiệu ứng kết hợp

Tất cả các hiệu ứng kết hợp đều dựa trên năm Hiệu ứng cốt lõi và được coi là ví dụ để cho phép bạn viết các hiệu ứng của riêng mình.

Thông thường những hiệu ứng này dựa vào sự thực thi song song, đồng bộ của các hiệu ứng khác. Việc thực thi như vậy có sẵn, do đó, việc tạo các hiệu ứng kết hợp của riêng bạn rất dễ dàng. Đây là danh sách các Hiệu ứng Kết hợp -

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

Ngoài ra, có Effect.toggle phương pháp tiện ích cho các phần tử bạn muốn hiển thị tạm thời với hoạt ảnh Xuất hiện / Làm mờ, Trang chiếu hoặc Mù.

Effect.toggle

Tệp Thư viện Cần thiết cho Hiệu ứng

Để sử dụng khả năng hiệu ứng của script.aculo.us, bạn sẽ cần tải mô-đun hiệu ứng. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ giống như sau:

<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>

Chức năng Hiệu ứng Cuộc gọi

Cách thích hợp để bắt đầu một hiệu ứng cốt lõi thường là với newnhà điều hành. Tùy thuộc vào sở thích của bạn, bạn có thể sử dụng một trong hai cú pháp:

Cú pháp

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Hai cú pháp này tương đương về mặt kỹ thuật. Lựa chọn giữa hai loại này chủ yếu là về cảm giác cá nhân của bạn về thẩm mỹ mã.

Thí dụ

Đây là hai lệnh gọi tương đương, vì vậy bạn có thể thấy các cú pháp có liên quan như thế nào, có thể hoán đổi cho nhau rất nhiều -

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });