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

Cách ẩn Code HTML không cho người khác View Source 4

Cách ẩn Code HTML không cho người khác View Source

29/06/2022
Cách lấy cookie XSS chứa mật khẩu bằng JavaScript 5

Cách lấy cookie XSS chứa mật khẩu bằng JavaScript

28/03/2022
Cảnh giác hình thức Phishing click vào Link nhưng truy cập Link khác 6

Cảnh giác hình thức Phishing click vào Link nhưng truy cập Link khác

23/03/2022
hoc lap trinh game de khong

Học lập trình Game dễ không? Tiềm năng của ngành lập trình game?

09/03/2022

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. 

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

Tìm hiểu Kiến trúc ứng dụng web - Web App Architecture 7
Code

Tìm hiểu Kiến trúc ứng dụng web – Web App Architecture

03/07/2022
Cách ẩn Code HTML không cho người khác View Source 8
Code

Cách ẩn Code HTML không cho người khác View Source

29/06/2022
Cùng tìm hiểu API, REST API và RESTful API là gì? 9
Code

Cùng tìm hiểu API, REST API và RESTful API là gì?

24/06/2022
Windows PowerShell cho nguoi moi
Code

Cách tạo và chạy File PowerShell trên Windows 10 cho người mới bắt đầu

12/06/2022
Cách đóng gói code Python 10
Code

Cách đóng gói code Python

25/04/2022
Có nên dùng Unity để lập trình game không? 11
Code

Có nên dùng Unity để lập trình game không?

07/04/2022
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
Đặng Ngọc Tuấn
2 years 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
Author
AnonyViet
2 years 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

Reply
ryan
ryan
2 years ago

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

Reply
AnonyViet
Author
AnonyViet
2 years ago
Reply to  ryan

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

Tìm hiểu Kiến trúc ứng dụng web - Web App Architecture 12

Tìm hiểu Kiến trúc ứng dụng web – Web App Architecture

03/07/2022
API Security 101: Injection 13

API Security 101: Injection

02/07/2022
DDosify - Công cụ kiểm tra sức chịu tải DDoS của Website 14

DDosify – Công cụ kiểm tra sức chịu tải DDoS của Website

01/07/2022
Danh sách các lệnh Linux bạn cần phải biết 15

Danh sách các lệnh Linux bạn cần phải biết

30/06/2022
Cách ẩn Code HTML không cho người khác View Source 16

Cách ẩn Code HTML không cho người khác View Source

29/06/2022

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 hệ

Email: anonyviet.com[@]gmail.com

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

 

Bản quyền: DMCA.com Protection Status

Bài viết mới

  • Tìm hiểu Kiến trúc ứng dụng web – Web App Architecture
  • API Security 101: Injection
  • DDosify – Công cụ kiểm tra sức chịu tải DDoS của Website
  • Danh sách các lệnh Linux bạn cần phải biết
  • Cách ẩn Code HTML không cho người khác View Source
  • Cách cài Windows 11 không cần tài khoản Microsoft bằng Rufus

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 92lottery sun86 stackoverflow tool tài xỉu 68 club 68 game bài iwinclub.link

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

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 92lottery sun86 stackoverflow tool tài xỉu 68 club 68 game bài iwinclub.link

wpDiscuz
pixel