Thêm code hiệu ứng chuột sẽ làm cho website của bạn trở nên sinh động, mới lạ. Thay đổi hình dạng con trỏ chuột cho blog/website, là một điều gì đó rất cần thiết, nếu bạn đã nhàm chán với hình hài cũ.
Bạn biết đấy, 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 của Html, CSS, JavaScript… càng trở nên phong phú cho các blog/website. Việc share/chia sẻ về các HTML, JavaScript, CSS… đẹp khi click chuột, cũng trở nên dễ dàng hơn.
Ở đây chúng ta có thể liệt kê như: Hiệu ứng trái tim, di chuyển theo chuột, chữ chạy theo… Nhưng trong bài viết này, chúng tôi sẽ chia sẻ cho bạn code hiệu ứng chuột bong bóng, dựa trên nền tảng JavaScript. Xin mời bạn tham khảo!.
Cách thêm code hiệu ứng chuột đẹp cho website/blog
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, BkViet.Com sẽ hướng dẫn thêm code hiệu ứng con trỏ 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.
|
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, 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?. Đây là thành quả, sau khi bạn thay đổi hình dạng con trỏ chuột cho blog/website nhé. Nếu video bị mờ, bạn chuyển sang chế độ 720p (HD), để xem video với chất lượng cao nhất.
Kết luận
Ngoài việc chia sẻ code hiệu ứng chuột bong bóng nở ra, chúng tôi còn muốn giới thiệu thêm bạn các hiệu ứng khác. Chẳng hạn như: Code tạo chữ chạy theo con trỏ chuột, hiệu ứng đẹp khi click chuột… Nhưng bài viết có hạn, vậy nên xin hẹn các bạn ở các bài viết tiếp theo. Đây là các kiến thức cơ bản trong chuyên mục lập trình, chúng tôi muốn chia sẻ cho bạn.
Nếu bạn biết cách tạo JavaScript chuột cho Website, thì website của bạn sẽ vô cùng sinh động. Thay đổi hình dạng con trỏ chuột cho blog/website, lúc này là rất cần thiết để bạn làm việc trên máy tính cảm thấy vui vẻ hơn. Thử áp dụng xem sao nhé.
Bạn đang theo dõi bài viết: Chia sẻ code hiệu ứng khi di chuyển chuột: Di chuyển chuột bong bóng nở ra. Nếu thấy bài post này hữu ích tới bạn. Đừng ngần ngại đánh giá, và comment. Để chúng ta cùng bàn luận về cách thay đổi hình dạng con trỏ chuột cho blog/website nhé. Chúc các bạn thành công!
Có plugin nào cho WP ko ta? Copy nhiều code quá ngại :v
Plugin chắc là có đấy bạn à, nhưng thường thì các tính năng lẻ tẻ này thường sẽ được gói gọn trong 1 Plugin nhất định nào đó. Chẳng hạn như Plugin về các hiệu ứng nền web chẳng hạn: Hiệu ứng mùa giáng sinh… Bạn thử tìm kiếm các nguồn khác xem sao!