• 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
Reading Time: 4 mins read
A A
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

tạo extension nhắc việc chrome đơn giản

Hướng dẫn tự tạo Extension Chrome bằng Scratch

27/03/2021
hoc code powershell

Hướng dẫn lập trình PowerShell trên Windows

27/02/2021
quan tri mang co can hoc lap trinh

Làm Quản trị mạng có cần phải biết lập trình không?

26/02/2021 - Updated on 27/02/2021
code shell script

Cách viết Shell Script trong Linux/Unix

17/02/2021

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:  Share Source code Virus Keylogger bằng C++

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

[Godot RPG]#5: Autotile - Lập trình game Godot Engine 1
Godot

[Godot RPG]#5: Autotile – Lập trình game Godot Engine

05/04/2021
tạo extension nhắc việc chrome đơn giản
Code

Hướng dẫn tự tạo Extension Chrome bằng Scratch

27/03/2021
[Godot RPG] #4 : Tilemap 2
Godot

[Godot RPG] #4 : Tilemap

04/03/2021 - Updated on 05/03/2021
hoc code powershell
Code

Hướng dẫn lập trình PowerShell trên Windows

27/02/2021
code shell script
Code

Cách viết Shell Script trong Linux/Unix

17/02/2021
code python keylogger
Code

Cách tạo KeyLogger bằng Python đơn giản nhất

14/02/2021
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
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

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

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

Reply
ryan | <span class="wpdiscuz-comment-count">2 comments</span>
ryan | 2 comments
1 year ago

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

Reply
AnonyViet | <span class="wpdiscuz-comment-count">1571 comments</span>
Author
AnonyViet | 1571 comments
1 year ago
Reply to  ryan | <span class="wpdiscuz-comment-count">2 comments</span>

không dc nha bạn

Reply
wpdiscuz   wpDiscuz

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

Cách tìm các trang web .Onion trên Dark Web còn vào được 3

Cách tìm các trang web .Onion trên Dark Web còn vào được

14/04/2021
Nên chọn KeePass, LastPass hay 1Password để quản lý Password 4

Nên chọn KeePass, LastPass hay 1Password để quản lý Password

13/04/2021
bao ve usb khoi virus an file

10 phần mềm bảo vệ USB tránh bị Virus ẩn file, mã hóa dữ liệu

13/04/2021
Checkpoint attack map

8 Bản Đồ Tấn Công Mạng giúp bạn theo dõi Cyber Attack theo thời gian thực

11/04/2021
VPN để chơi game

Có nên sử dụng VPN để chơi game không?

10/04/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
RikVip
iwin888
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 tìm các trang web .Onion trên Dark Web còn vào được
  • Nên chọn KeePass, LastPass hay 1Password để quản lý Password
  • 10 phần mềm bảo vệ USB tránh bị Virus ẩn file, mã hóa dữ liệu
  • 8 Bản Đồ Tấn Công Mạng giúp bạn theo dõi Cyber Attack theo thời gian thực
  • Có nên sử dụng VPN để chơi game không?
  • Cách sửa lỗi “Windows needs more space” khi cập nhật Windows 10
  • 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