Trình chiếu JavaScript với CSS

• Có Thể 13, 2024

Trong một bài viết trước, chúng tôi đã tạo một trình chiếu JavaScript rất đơn giản. Trình chiếu này hoàn toàn có chức năng và thậm chí hiển thị thứ gì đó phù hợp cho những người không có JavaScript, nhưng nó không hoàn toàn có tất cả các tính năng tôi muốn có cho trang web của mình. Cụ thể, tôi muốn có hình thu nhỏ của hình ảnh mà tôi hiện đang hiển thị bằng cách nào đó trông khác với các hình thu nhỏ khác. Vì các kiểu là một cách tốt để thực hiện điều này, tôi sẽ bắt đầu bằng cách chuyển đổi tất cả các thuộc tính trong HTML hiện tại của tôi sang CSS.

Đầu tiên tôi chuyển đổi kiểu dáng hiện có của mình để sử dụng CSS. Nếu bạn không quen thuộc với CSS, cách dễ nhất để bắt đầu thử nghiệm với nó là đặt nó ở giữa Phong cách các thẻ trong phần đầu của tài liệu HTML của bạn. Thẻ ban đầu cần một thuộc tính loại để cho trình duyệt biết loại thông tin kiểu bạn đang sử dụng, vì vậy nó sẽ trông như thế này:



Việc chuyển đổi ban đầu sang CSS rất dễ dàng vì chỉ có hình ảnh lớn có thông tin về kiểu dáng và nó đã có Tôi thuộc tính đã được sử dụng cho mục đích JavaScript.

#larshImage {
viền: 2px màu đen;
chiều rộng: 544px;
chiều cao: 408px;
}

Trước đây tôi chưa bao gồm thông tin kích thước cho hình thu nhỏ, nhưng tôi đã thêm một lớp được gọi là ngón tay cái và đặt thẻ hình ảnh trong lớp đó để đặt kích thước thành 40px x 40px. Điều này có nghĩa là ngay cả khi tôi vô tình tải hình ảnh quá lớn hoặc nhỏ cho hình thu nhỏ, chúng sẽ bị buộc phải hiển thị ở kích thước hình thu nhỏ.

img.thumbs {
biên giới: không có;
chiều rộng: 40px;
chiều cao: 40px;
}

Tôi cũng đã thêm một trình chiếu lớp để giữ toàn bộ slideshow. Điều này sẽ cho phép tôi thực hiện những việc như thêm đường viền hoặc thay đổi màu nền cho toàn bộ trình chiếu nếu tôi muốn. Tại thời điểm này, tôi chỉ sử dụng nó để đặt chiều cao tối đa thành chiều cao của hình ảnh lớn, bởi vì khi tôi thêm hình thu nhỏ, tôi muốn chúng ở bên cạnh hình ảnh lớn thay vì di chuyển lên trên nó. Thật không may, Internet Explorer không hỗ trợ thuộc tính chiều cao tối đa, vì vậy tôi sẽ vẫn phải giải quyết vấn đề này sau.

.trình chiếu{
chiều cao: 408px;
chiều cao tối đa: 408px;
}

Cuối cùng tôi đã tạo một kiểu cho hình thu nhỏ được chọn. Tôi quyết định rằng tôi muốn hình thu nhỏ được chọn của mình là bán trong suốt và có viền đỏ hẹp. Vì chỉ có một hình ảnh sẽ được chọn tại một thời điểm, tôi quyết định sử dụng một id gọi là "hiện tại" cho mục đích này. Ưu điểm của việc sử dụng CSS là tôi có thể thay đổi cách nhìn vào bất cứ lúc nào mà không cần thay đổi mã. Phong cách trông như thế này:

img # hiện tại {
viền: 1px màu đỏ;
bộ lọc: alpha (độ mờ = 50);
-moz-opacity: 0,5;
độ mờ đục: 0,5;
}

Ở đây chúng ta thấy một số mã để xử lý lại sự khác biệt của trình duyệt, các lệnh gọi tiêu chuẩn để sử dụng phần tử độ mờ, nhưng cả hai trình duyệt dựa trên IE và Mozilla đều chưa hỗ trợ điều đó.

Cuối cùng, tôi đã thay đổi HTML cho hình thu nhỏ để sử dụng các kiểu và gọi hàm của tôi. HTML cho trình chiếu của tôi bây giờ trông như thế này:









Chúng tôi đã không thay đổi JavaScript của chúng tôi, vì vậy trình chiếu vẫn hoạt động, nhưng bây giờ chúng tôi có nhiều kiểu dáng hơn và bản trình bày của chúng tôi được tách ra khỏi HTML và JavaScript. Tuy nhiên, chúng tôi có một vấn đề, trong khi hình thu nhỏ được chọn ban đầu là bán trong suốt với viền đỏ, nó vẫn giữ nguyên như vậy khi chúng tôi thay đổi hình ảnh. Để khắc phục điều này, chúng tôi cần quay lại JavaScript người bạn cũ của chúng tôi.

Bạn có thể thấy một ví dụ hoạt động của mã cho đến nay.

Video HướNg DẫN: Hướng Dẫn Tạo Slide Ảnh Đơn Giản Cho WebSite Với HTML CSS JAVASCRIPT | Phần 1 | Thiết Kế Website (Có Thể 2024).