Bài tập javascript 9 – Xử lý hiệu ứng cuộn chuột của trang kênh14

bài tập javascript 9 này, mình và các bạn sẽ tiếp tục xử lý hiệu ứng cuộn chuột. Chúng ta sẽ làm hiệu ứng khi cuộn chuột của trang kênh14.vn. Kênh 14.vn có được xem là trang lớn không nhỉ :D, mới học có mấy bài mà chúng ta đã xử lý được hiệu ứng của nó rồi đấy. Mình xin được bắt đầu bài viết 😀

hiệu ứng cuộn chuột

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

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM
  6. Bắt sự kiện cuộn chuột

Trong bài này chúng ta sẽ cần dùng thêm phương thức xác định chiều cao của phần tử html là offsetTop

Bài tập javascript 9 – Xử lý hiệu ứng cuộn chuột của trang kênh14

Mô tả bài tập: Khi lăn chuột xuống thanh menu đổi sang màu đen, lăn chuột đến khối cam trên màn hình thì nó sẽ dữ nguyên cho đến hết.

Demo:

Click vào bài tập js 9 để 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 js:

Kết quả: 

hiệu ứng cuộn chuột

File js :

  • Đầu tiên mình sẽ truy xuất các phần tử cần xử lý là menu và khối benphai
  • Khởi tạo biến trạng thái là trangthai và trangthaikhoi ben phai tác dụng của nó thì mình đã đề cập trong bài tập trước rồi nhé.
  • Bài này cũng thường thôi chỉ có thêm cái xác định chiều cao của phần từ bằng phương thức offsetTop ai chưa rõ thì xem bài trước nhé :D.

Vậy là mình đã làm xong Bài tập javascript 9 – Xử lý hiệu ứng cuộn chuột của trang kênh14 rồi 😀 Mình sẽ quay trờ lại với những bài tập khác, có thắc mắc gì cứ để lại comment phía dưới nha. Mình xin được dừng bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
Notify of