Trên Facebook, Instagram, Twitter hay 1 số mạng xã hội khác có chức năng thả tim hình ảnh, bài viết. Vậy đối với blog/website thì liệu có làm được chức năng đó không thì mình xin khẳng định là có nhé.

Hôm nay, mình sẽ cung cấp cho các bạn đoạn code có thể tạo ra 1 nút thả tim như vậy. Cụ thể là khi bấm vào thì trái tim sẽ đỏ lên kèm hiệu ứng động xung quanh. Điều đặc biệt ở đây là khi F5 (load lại trang) thì sẽ không mất hiệu ứng đã thả tim với localStorage.

Kiến thức cần dùng mà mình đã giới thiệu trước đó là Tìm hiểu về 3 hàm addClass(), removeClass() và toggleClass().

Nút thả tim cho blog/website

HTML

<div class="heart" onclick="checkStyle()"></div>

CSS

.heart {
  width: 100px;
  height: 100px;
  background: url("https://pcdevshare.com/wp-content/uploads/2018/12/heart.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position steps(28);
  transition-duration: 0s;
}

.heart.is-active {
  transition-duration: 1s;
  background-position: -2800px 0;
}

JS

$(document).ready(function() {
    var style = localStorage.getItem("styleIcon");
    if (style == null) {
        $(".heart").removeClass("is-active");
        localStorage.setItem("styleIcon", "list");
    } else if (style == "grid") {
        $(".heart").addClass("is-active");
    } else if (style == "list") {
        $(".heart").removeClass("is-active");
    }
});

function checkStyle() {
    var style = localStorage.getItem("styleIcon");
    if (style == "grid") {
        $(".heart").removeClass("is-active");
        localStorage.setItem("styleIcon", "list");
    } else if (style == "list") {
        $(".heart").addClass("is-active");
        localStorage.setItem("styleIcon", "grid");
    }
};

Demo: https://codepen.io/tsmkevin815/pen/roNjvV

Có 2 điểm cần lưu ý trong bài này: Trước hết là việc chèn chỗ code kia sao cho dùng được với blog/website của bạn thì cái này do bạn nhé vì bên Blogspot 1 kiểu, bên WordPress 1 kiểu khác nên mình chỉ đưa code nút thả tim còn lại bạn sẽ phải là người xử lý.

Thứ 2 là phần localStorage sử dụng trên bài để lưu trữ dữ liệu nút thả tim là chỉ dành riêng cho client đó. Vì vậy mà chỉ có mình bạn nhìn thấy mình đã thả tim hay chưa, còn người khác sẽ không thấy. Để tìm hiểu rõ hơn về localStorage hay sessionStorage thì bạn có thể tham khảo tại https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

Lời kết

Sắp tới có thể mình sẽ ra bài thả tim có bộ đếm cho mọi người dùng. Code vẫn đang trong quá trình test nên mình sẽ viết bài khi nào ok. Hãy theo dõi và đón đọc các bài viết tiếp theo trên website mình nhé.

Created by: PCDevShare.Com