Code hiệu ứng chuột: Bong bóng nở ra cực đẹp khi di chuyển chuột!

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ạ. Thay đổi hình dạng con trỏ chuột cho blog/website là điều rất cần thiết, nếu bạn đã nhàm chán với những gì hiện đang có trên website.

Việc thay đổi hình dạng con trỏ chuột là điều khá dễ dàng. Vì hiện nay các tính năng trên HTML/JavaScript, CSS… càng trở nên phong phú cho quản trị viên blog/website. Bởi vậy, việc chia sẻ các code hiệu ứng chuột cũng trở nên vô cùng dễ dàng.

Tôi có thể liệt kê chẳng hạn như: Hiệu ứng trái tim cho chuột, di chuyển theo chuột, chữ chạy theo chuột… Nhưng đối với bài viết này, tôi sẽ chia sẻ cho bạn code hiệu ứng chuột bong bóng, giúp làm đẹp cho blog/website của các bạn.

Cách thêm code hiệu ứng chuột đẹp cho website WordPress

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

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. Bạn có thể chèn ở Header, Sidebar, Footer… Miễn sao những nơi phù hợp thì bạn có thể chèn code 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> 

  ● Xem thêm:

• Cách chèn Fanpage Facebook vào Website, thêm Page vào WordPress.
• Cách chèn ngày giờ vào website, chèn thời gian vào trang web WordPress.

Bước 3: Và cuối cùng, cách thay đổi hiệu ứng rê di chuyển chuột, thật sự rất đẹp mắt phải không nào? Dưới đây là thành quả, sau khi thay đổi hình dạng con trỏ chuột cho blog/website của tôi nhé!

Kết luận

Ngoài việc chia sẻ code hiệu ứng chuột bong bóng nở ra, còn có nhiều hiệu ứng khác đa dạng cho website WordPress: Code chữ chạy theo con trỏ chuột, code hiệu ứng đẹp khi click chuột tạo tuyết rơi… Vấn đề này được đề cập rất nhiều ở trên Internet.

Khi thao tác di chuyển chuột, bên cạnh có các hiệu ứng. Độc giả vào website của bạn dễ bị kích thích, vì sự độc đáo mới lạ trên website. Và có thể họ sẽ ở lại website của bạn lâu hơn, nhằm vui đùa với những hiệu ứng trên website của bạn. Chúc thành công!