Tạo nút thả tim cho website

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

22
Bình luận

avatar
10 Comment threads
12 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
7 Số người bình luận
Cuong NguyenNguyễn Lương DuyNguyễn DuyĐẶNG HƯNGNiệm Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Trần Nhật Sinh | 17 comments
Khách
Trần Nhật Sinh | 17 comments

Bắn tim cho anh cường

Niệm | 9 comments
Khách
Niệm | 9 comments

Này nó ko đếm tim luôn như FB hả 😀

Niệm | 9 comments
Khách
Niệm | 9 comments

sao cái chỗ khung cmt của ông chặn đc cái thêm link vậy?

ĐẶNG HƯNG | 7 comments
Khách
ĐẶNG HƯNG | 7 comments

khá pro

Nguyễn Phú | 4 comments
Khách
Nguyễn Phú | 4 comments

Tích hợp thêm cái đếm nữa thì hay ấy a 😀 hóng a ra thêm cái đến :v

Quốc Bảo Blog | 30 comments
Khách
Quốc Bảo Blog | 30 comments

em cũng hóng như phú kkk :p

Quốc Bảo Blog | 30 comments
Khách
Quốc Bảo Blog | 30 comments

Chúc anh năm mới vui vẻ <3Một năm đầy thành công và may mắn. Nhanh chóng gửi thiệp cho em hihi

Nguyễn Phú | 4 comments
Khách
Nguyễn Phú | 4 comments

Happy New Year 1.1.2019

Niệm | 9 comments
Khách
Niệm | 9 comments

Happy New Year nha, năm mới có ngiu đi nhé :))

ĐẶNG HƯNG | 7 comments
Khách
ĐẶNG HƯNG | 7 comments

Happy New Year nhé anh hơi muộn nhưng ko sao nhở . hihi

Nguyễn Duy | 10 comments
Khách
Nguyễn Duy | 10 comments

GA của anh không hiện à? Chả hiểu sao Blog em cũng không hiện GA như a….

Nguyễn Lương Duy | 10 comments
Khách
Nguyễn Lương Duy | 10 comments

Từ tối qua tầm 12h đến tận lúc 4h chiều nay nó mới hiện lại đó a…