Bài tập javascript 19 – Hiệu ứng Modal image

0
8

bài tập javascript 19 này chúng ta sẽ viết hiệu ứng Modal image. Hiệu ứng này được sử dụng khi người dùng click vào hình ảnh để xem hình ảnh rõ nét hơn. Nhìn chung thì nó cũng khá dễ thôi, chỉ cần đặt css hợp lý là được rồi. Javascript thì cũng chỉ truy xuất phần tử và thay đổi thuộc tính. Mình xin được bắt đầu viết.

modal image

Kiến thức cần có:

  1. Biến
  2. Câu lệnh if – else
  3. Mảng
  4. Hàm
  5. Event
  6. HTML DOM

Bài tập javascript 19 – Hiệu ứng Modal image

Mô tả bài tập: Khi click chuột vào hình ảnh nhỏ sẽ xuất hiện hình ảnh to, căn giữa màn hình được chứa bởi một background gam màu tối.

Demo:

Click vào bài tập js 19 để xem kết quả.

Mình sẽ code và giải thích chi tiết ngay phía sau.

Code: html

Code:css

Code: javascript

Kết quả:

bài tập javascript

Giải thích:

  • Thực sự cái hiệu ứng này nó hơi dễ :D, nhưng mình vẫn giải thích tí nha.
  • Sẽ chia làm 2 khối một khối chứa ảnh nhỏ, một khối chứa ảnh to
  • Cái cơ bản là chúng ta xử lý phần css thôi, dùng thuộc tính position: absolute để căn chỉnh vị trí của khối chứa ảnh to.
  • Sau căn giữa ảnh nhỏ, thêm animation để tạo ra hiệu ứng cho ảnh to khi nó xuất hiện
  • Về phần javascript thì mình chỉ truy xuất phần tử gán sự kiện click và thay đổi thuộc tính css thôi , từ none về block rồi lại về none.

Okê xong rồi đấy, vậy là mình đã xử lý xong hiệu ứng modal image rồi nhé. Mình sẽ trở lại với những hiệu ứng khác, mình xin được kết thúc bài viết tại đây.

 

ĐỂ LẠI BÌNH LUẬN

Vui lòng nhập nội dung bình luận
Vui lòng nhập tên