haitaynamkg

Tổng hợp kiến thức nhân loại
Nguyễn Văn Hải

Hiệu ứng bong bóng cho trỏ chuột

----------------------------------------------------------------------------------------------------

Với code JavaScript này, rất nhiều bong bóng sẽ xuất hiện mỗi khi bạn di chuyển con trỏ chuột. Vô cùng vô cùng dễ thương đó. 

Bạn chỉ cần paste đoạn code sau đây vào 1 tiện ích HTML/ JavaScript là được. 

Code: 
<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> 
Note: bạn có thể thay thế mã màu #F781BE thành mã màu khác để có được màu bong bóng theo ý muốn của bạn. 
Chào mừng và rất vui các bạn đến với blog chia sẻ mình!

Tham quan du ngoạn từ Nam chí Bắc:

An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái

|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||

Bộ sưu tập ảnh hot:

|| || || || || || || || || || || || || || || || || ||
Like bài viết nếu bạn thấy hay và có ích :
Những gì mình biết, hãy chia sẻ cho mọi người cùng biết nhé! Xin mời bạn bình chọn!

Bạn đã xem chưa

0 nhận xét | Viết lời bình

Copyright © 2014 Haitaynamkg Knowledge Humanity