Scroll content popup Bootstrap bằng jQuery – Cách làm chi tiết
Scroll content popup Bootstrap bằng jQuery là giải pháp phổ biến khi cần hiển thị nội dung dài trong modal.Cách làm này giúp popup có thanh cuộn riêng, tránh tràn...
Xem tiếp...Thay hình bằng jQuery trên smartphone giúp website hiển thị hình ảnh phù hợp với màn hình thiết bị.
Giúp tối ưu giao diện, giảm dung lượng tải và cải thiện trải nghiệm người dùng trên smartphone.
Các bài viết có thể bạn quan tâm:
Scroll content popup Bootstrap bằng jQuery
Tạo hình 360 độ bằng JavaScript
Ví dụ với code html như bên dưới, chúng ta thêm class “sp_img” để có thể xác định hình nào cần thao tác.
/*Chèn hình thêm class "sp_img"*/
<img src="link hình 1" alt="img1" class="sp_img">
<img src="link hình 2" alt="img2" class="sp_img">
<img src="link hình 3" alt="img3" class="sp_img">Thêm code jquery như bên dưới, khi màn hình hiển thị nhỏ hơn 767px thì tự động tìm các tab html có class “sp_img” và thay attr src của hình đó thành hình khác mà mình muốn ví du img.png => img-sp.png
if ($(window).width() < 767) {
$("img.sp_img").each(function (i) {
var src = $(this).attr("src");
var newsrc;
if (src.indexOf(".png") == -1) {
newsrc = src.replace(".jpg", "-sp.jpg");
} else {
newsrc = src.replace(".png", "-sp.png");
}
$(this).attr("src", newsrc);
});
}
Để lại suy nghĩ của bạn