Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo nút trượt trên 2 hình ảnh bằng HTML, CSS và Javascript.
Nhấn, giữ và kéo nút trượt màu xanh ở giữa hình ảnh sang trái/ phải để xem hiệu ứng.
Bước 1) Thêm HTML:
Ví dụ
<!-- Tạo vùng chứa hình ảnh có thể trượt --> <div class="containerImg"> <div class="imgSlide"> <img src="/images/picture_3.jpg" alt="Núi tuyết" /> </div> <div class="imgSlide" id="img"> <img src="/images/picture_4.jpg" alt="Sóng biển" /> </div> </div>
Bước 2) Thêm CSS:
Ví dụ
/* Tạo kiểu cho vùng chứa, vị trí là tương đối */ .containerImg { width:400px; height:250px; position:relative; } /* Vùng chứa các hình ảnh */ .containerImg .imgSlide { width:auto; height:auto; position:absolute; overflow:hidden; } /* Đặt chiều rộng, chiều cao cho hình ảnh */ .containerImg img { width:400px; height:250px; } /* Tạo kiểu cho thanh trượt */ .containerImg .slider { width:40px; height:40px; background-color:#6F6; z-index:99; position:absolute; opacity:0.6; border-radius:50%; cursor:ew-resize; }
Bước 3) Thêm JavaScript:
Ví dụ
<script> // Khai báo các biến var img, slider, w, h, clicked = 0; // Tìm phần tử có id là "img" img = document.getElementById('img'); // Lấy chiều rộng, chiều cao của phần tử img w = img.offsetWidth; h = img.offsetHeight; // Gán chiều rộng mới cho phần tử img img.style.width = (w / 2) + "px"; // Tạo phần tử div mới tên là slider slider = document.createElement("div"); // Gán thuộc tính "class" cho phần tử slider slider.setAttribute("class","slider"); // Gán vị trí cho phần tử slider trước phần tử img img.parentElement.insertBefore(slider, img); // Căn giữa phần tử slider slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; // Gán sự kiện nhấn chuột cho phần tử slider slider.addEventListener("mousedown", slideReady); window.addEventListener("mouseup", slideFinish); // Gán sự kiện trên màn hình cảm ứng slider.addEventListener("touchstart", slideReady); window.addEventListener("touchend", slideFinish); // Định nghĩa hàm slideReady function slideReady(e) { // Ngăn chặn bất kỳ hành động nào khác có thể xảy ra khi nhấn chuột trên hình ảnh e.preventDefault(); clicked = 1; // Thêm sự kiện di chuyển chuột gắn với hàm slideMove window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } // Định nghĩa hàm slideFinish function slideFinish() { clicked = 0; } // Định nghĩa hàm slideMove function slideMove(e) { var pos; // Nếu phần tử slider không có sự kiện nhấn chuột, thoát khỏi hàm if(clicked == 0) { return false; } // Lấy tọa độ x của con trỏ chuột pos = getCursorPos(e); // Không cho phần tử slider trượt ra ngoài hình ảnh if(pos > w) { pos = w; } if(pos < 0) { pos = 0; } // Gán chiều rộng mới cho phần tử img theo con trỏ chuột img.style.width = pos + "px"; // Gán vị trí mới cho phần tử slider slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } // Định nghĩa hàm lấy tọa độ con trỏ chuột function getCursorPos(e) { var a, x = 0; a = img.getBoundingClientRect(); // Tính toán tọa độ bắt đầu của con trỏ trên hình ảnh x = e.pageX - a.left; // Nếu người dùng cuộn trang x = x - window.pageXOffset; return x; } </script>