• Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
AnonyViet
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
AnonyViet
No Result
View All Result

Code tạo hiệu ứng click chuột hiện trái tim trên Website

AnonyViet by AnonyViet
03/01/2020 - Updated on 24/02/2020
in Code
4

Mục lục bài viết

  1. Share Code tạo hiệu ứng click chuột hiện trái tim trên Website
  2. Hiệu ứng click chuột ra trái tim trên Blogspot
  3. Hiệu ứng click chuột ra trái tim trên WordPress

Khi tạo ra được một trang web, ngoài chức năng ra bạn còn phải trang trí website để giao diện thêm phong phú. Mấy hôm nay rộ lên phong trào click chuột vào web sẽ hiển thị hình trái tim đủ màu sắc trong rất đẹp mắt. Hôm nay AnonyViet sẽ hướng dẫn bạn tạo hiệu ứng click chuột hiện trái tim trên Website bằng Javascript.

Share Code tạo hiệu ứng click chuột hiện trái tim trên Website

Để hiển thị hình trái tim khi click chuột vào bất kỳ vị trí nào trên Website bạn cần sử dụng Javascript. Đoạn Code dưới đây sẽ giúp bạn thực hiện việc này khá đơn giản. Bạn có thể tạo trái tim bay trên Website bất cứ mã nguồn nào như Blogspot, WordPress…

Các bài viết liên quan

cach tao website onion dark web deep web

Cách tạo Website trên Dark Web và Deep Web

20/12/2020 - Updated on 21/12/2020
Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

27/11/2020 - Updated on 30/11/2020
extension hay cho Visual Studio Code

24 Extension Visual Studio Code tốt nhất nên sử dụng khi lập trình

11/11/2020
Xoá các File trùng lặp bằng Python

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020

Xem Demo

Download Code Click Tim javascript

<script type='text/javascript'> ! function (e, t, a) { function n() { c( ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}" ), o(), r() } function r() { for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document); </script>

Hiệu ứng click chuột ra trái tim trên Blogspot

Đối với Blogspot, bạn truy cập vào trang quản lý Blogspot. Chọn Menu Chủ đề -> Chỉnh sửa HTML. 

Xem thêm:  Cách thiết lập môi trường ảo Python trên Windows 10

Nhấn Ctrl + F để hiển thị khung tìm kiếm. Gõ chữ </body> để tìm vị trí của thẻ này.

Bạn copy đoạn code ở trên vào phía trên thẻ </body>

click chuột hiện trái tim blogspot

Việc đặt Code vào thẻ body sẽ giúp website load nhanh hơn, vì các nội dung sẽ load trước sau đó mới đến hiệu ứng click chuột hiện ra trái tim. Tránh làm nội dung chính của Website bị chậm đi.

Hiệu ứng click chuột ra trái tim trên WordPress

Đối với WordPress, bạn tìm đến thư mục wp-content/themes/tên-themes-đang-dùng/ mở file footer.php lên. Copy đoạn code ở trên vào trên thẻ </body>

Để cho đẹp hơn, bạn có thể tải file javascript clicktim.js 

Download Code Click Tim javascript

Sau đó upload lên một folder của Website rồi, dùng code bên dưới, khai báo địa chỉ của file clicktim.js  là xong.

<script src="đường-link-của-file-clicktim.js"></script>

click chuột hiện trái tim wordpress

Hiệu ứng click chuột ra trái tim rất thích hợp để bạn tạo hiệu ứng cho Website đếm ngày yêu. Đặc biệt là vào mùa Valetine sắp tới, hãy tạo một Website lãng mạng để tặng người yêu nhé. Chắc chắn cô ấy sẽ thích đấy.

Tags: codehiệu ứnghiệu ứng trái timjavascripttrái tim
Previous Post

Cách khắc phục sự cố về Windows Update trên Windows 10

Next Post

Hướng dẫn dùng Sketch2Code để chuyển bản vẽ tay thành file HTML

AnonyViet

AnonyViet

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

Related Posts

môi trường ảo python windows
Code

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
Các kiểu dữ liệu cơ bản trong Python 1
Code

Các kiểu dữ liệu cơ bản trong Python

12/01/2021
Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học
Code

Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

27/11/2020 - Updated on 30/11/2020
Xoá các File trùng lặp bằng Python
Code

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020
viet ung dung chat bang python
Code

Cách viết ứng dụng chat đơn giản bằng Python

15/10/2020 - Updated on 16/10/2020
ứng dụng tra số điện thoại thuộc Quốc gia nào
Code

Viết ứng dụng tra số điện thoại thuộc Quốc gia nào bằng Python

11/10/2020 - Updated on 13/10/2020
Next Post
cách dùng Sketch2Code

Hướng dẫn dùng Sketch2Code để chuyển bản vẽ tay thành file HTML

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

4 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
Đặng Ngọc Tuấn | <span class="wpdiscuz-comment-count">3 comments</span>
Đặng Ngọc Tuấn | 3 comments
1 year ago

Em đang sử dụng wordpress, cái cách thứ 2 anh có thể giải thích lại giúp e được không ạ, cái cách 1 khi sử dụng wp thì e làm được rồi còn cái cách thứ 2 em không hiểu là tạo folder và upfile vào là như thế nào, cảm ơn admin

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1521 comments</span>
Author
AnonyViet | 1521 comments
1 year ago
Reply to  Đặng Ngọc Tuấn

bạn up cái file lên web bạn, xem đường dẫn file là gì?
Ví dụ: abc.com/clicktim.js thì copy đoạn code:

trên thẻ /body

0
Reply
ryan | <span class="wpdiscuz-comment-count">2 comments</span>
ryan | 2 comments
11 months ago

nếu mình muốn làm nó cho wall fb thì có dc k ad

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1521 comments</span>
Author
AnonyViet | 1521 comments
11 months ago
Reply to  ryan

không dc nha bạn

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

ghép ảnh áo dài tết

Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop

17/01/2021
Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS 2

Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS

17/01/2021
môi trường ảo python windows

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
setup Absorber keylogger

Cách dùng Absorber Keylogger bí mật ghi lại thao tác bàn phím

15/01/2021
leaked db password MOSINT

MOSINT – Tool Truy vết địa chỉ Email để tìm thông tin cá nhân của bất kỳ ai

14/01/2021

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên kết

Game B52 |  Tải game đổi thưởng online | Chơi game bài hot 2020 | Chơi game bài đổi thưởng online | Gam Víp | 88vin link

Liên hệ đặt Ads: [email protected]

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

Bài viết mới

  • Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop
  • Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS
  • Cách thiết lập môi trường ảo Python trên Windows 10
  • Cách dùng Absorber Keylogger bí mật ghi lại thao tác bàn phím
  • MOSINT – Tool Truy vết địa chỉ Email để tìm thông tin cá nhân của bất kỳ ai
  • Cách kiểm tra tin nhắn Signal đã an toàn và riêng tư chưa?
  • Giới thiệu về AnonyViet
  • Liên hệ Quảng cáo
  • Privacy & Policy
  • Contact

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

wpDiscuz