Chia sẻ code hiệu ứng Chuột: Di chuyển Chuột bong bóng nở ra

4.7 (93.33%) 3 votes

Thêm code hiệu ứng chuột sẽ làm cho website của bạn trở nên sinh động và mới lạ hơn so với các web đối thủ. Phải chăng, thường các đoạn mã code sẽ khiến website của bạn tốc độ tải trang bị chậm, nhưng nếu bạn chỉ chèn một vài đoạn mã vào trang web thì cũng chẳng ảnh hướng gì mấy, bạn đừng sợ.

Bạn biết đấy, khi chúng ta truy cập vào một website nào đó ta đều thích sự độc lạ, để xua đi sự khô khan khi đọc các kiến thức của các bài viết dài dằng dặc. Trên website, bạn có thể chèn nhiều hiệu ứng khác nhau: Hiệu ứng tuyết rơi, hiệu ứng chữ chạy quanh chuột, hiệu ứng hình ảnh… Các hiệu ứng với chuột độc giả của bạn thường quan tâm để ý hơn, nếu bạn thêm các đoạn mã code hiệu ứng chuột vào website của mình, sẽ khiến độc giả của bạn thích thú hơn đấy. Nhưng cái này cũng tùy bạn thôi, mỗi người một sở thích, nếu vì một lý do nào đó nếu bạn không muốn thêm code hiệu ứng chuột vào trang web của bạn thì bạn có thể bỏ qua bài viết này.

➤Xem thêm: Sự khác biệt giữa WordPress.com và WordPress.org

➤Xem thêm: Hướng dẫn tạo đánh giá 5 sao cho bài viết WordPress

Còn nếu bạn quan tâm, BkViet sẽ chia sẻ cho bạn một đoạn mã code, giúp bạn thêm hiệu ứng chuột vào website của bạn.

CÁCH THÊM CODE HIỆU ỨNG CHUỘT VÀO WEBSITE

Vì đa số chúng ta đều sử dụng website mã nguồn WordPress, nên trong bài viết này sẽ hướng dẫn thêm code hiệu ứng chuột vào website mã nguồn WordPress.

Bước 1: Bạn đăng nhập vào trang quản trị WordPress website của bạn.

Bước 2: Bạn sử dụng đoạn mã code phía dưới đây, rồi chèn vào một nơi bất kỳ trên website của bạn (bạn có thể chèn ở Header, Sidebar, Footer… miễn sao những nơi nào cho phép bạn chèn mã code là bạn có thể chèn nó vào)

<script type="text/javascript"> var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bubbles=100; // jumlah maksmal gelembung var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy){ ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
</script>

Bước 3: Và cuối cùng, đây là thành quả sau khi bạn thêm code hiệu ứng chuột bong bóng vào trang web. (nếu video bị mờ, bạn nên chuyển sang chế độ 720p (HD) để xem video với chất lượng cao nhất):

KẾT LUẬN

Website của bạn sẽ vô cùng sinh động nếu bạn thêm các đoạn mã code và code hiệu ứng chuột bong bóng cũng không ngoại lệ. Nếu bạn thấy code hiệu ứng này thú vị, bạn thử áp dụng vào website của mình xem sao nhé.

Các bài viết có cùng chuyên mục cùng bài viết này: Chèn ngày giờ vào website, chèn thời gian vào website của bạn và bạn cũng có thể tham khảo thêm bài viết Không cho người khác copy nội dung bài viết website của bạn.

Bạn đang theo dõi bài viết Chia sẻ code hiệu ứng Chuột: Di chuyển Chuột bong bóng nở ra. Nếu thấy bài viết này hay nhớ chia sẻ nhé và đừng quên để lại comment nếu có câu hỏi muốn được giải đáp. Chúc các bạn thành công!