Code con ruồi bò trên blogspot/web- Sưu tầm

Tham gia cộng đồng lập trình viên

Code con ruồi bò trên blogspot/web

Code con ruồi bò trên blogspot/web- Sưu tầm
Hiệu ứng con ruồi bò trên blogspot là bạn có thể tạo một hay nhiều con ruồi bò qua lại trên giao diện blogspot của mình.
Nghĩa là khi khách truy cập blogspot của bạn sẽ thấy 1 con ruồi nó sẽ chạy mọi nơi(360 độ) trên màn hình của Blogspot/Website.
Khi click chuột vô con ruồi đó nó sẽ chạy như bị ma đuổi.
Bạn có thể thấy demo ngay tại bài viết này hay xem qua DEMO ở trang khác bên dưới.
Để tạo được con ruồi như thế bạn chỉ cần sử dụng đoạn code ngắn gọn sẽ trình bầy ngay sau đây.

Xem thử ngay trên trang này hoặc demo ở blog khác.

DEMO

Muốn có con ruồi như trong demo bạn cần dán đoạn code bên dưới vào trước thẻ </head>
Code:
Bước 1
Thêm thư viện jquery cho blogspot, nếu blog có rồi thì bỏ qua bước này.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
Bước 2
Thêm javascript ruồi bò.
<!-- Ruồi start -->
<script type='text/javascript'>
//<![CDATA[
function Fly(fid, type, color, sh, sw, x, y, fly_img, name) {
if (typeof fly_img == "undefined" || fly_img == '') {
var fly_img = "image/flies.png";
}
if (typeof sh == "undefined" || sh == 0 || typeof sw == "undefined" || sw == 0) {
if (typeof(window.innerWidth) == 'number') {
var sw = window.innerWidth;
var sh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
var sw = document.documentElement.clientWidth;
var sh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var sw = document.body.clientWidth;
var sh = document.body.clientHeight;
};
}
var f = document.createElement("DIV");
var offset = 200;
var offsetb = 250;
var caminando = true;
if (typeof x == "undefined" || x == 0 || typeof y == "undefined" || y == 0) {
var x = 0;
var y = 0;  
if(Math.random() < 0.5){
if(Math.random() < 0.5){
var x = 5;
} else {
var x = (sw-50);
}
var y = Math.round(Math.random()*(sh-50));
} else {
if(Math.random() < 0.5){
var y = 5;    
} else {
var y = (sh-50);    
}
var x = Math.round(Math.random()*(sw-50));
}
}
if (typeof xx == "undefined" || xx == 0) {
var xx = 3;
} 
if (typeof yy == "undefined" || yy == 0) {
var yy = 3;
}
this.movestep = 30;
this.type = type;
this.name = name;
this.color = color;
this.fid = fid;
this.move_strange = false;
if (Math.random() < 0.5) {
this.gender = "Đực";
} else {
this.gender = "CĂ¡i";
}
f.title = this.name + "\nLoại: "+this.type+"\nMĂ u sắc: "+this.color+"\nGiá»›i tĂ­nh: "+this.gender;
f.id = fid;
f.style.width = "50px";
f.style.height = "50px";
f.style.backgroundImage = "url(" + fly_img + ")";
f.style.backgroundPosition = "0px -" + offset + "px";
f.style.position = "absolute";//"absolute";
f.style.left = Math.round(x) + "px";
f.style.top = Math.round(y) + "px";
f.style.zIndex = 9999;
f.style.cursor = "pointer";
f.style.cursor = "url('/images/xit_muoi.png'), auto;";
var parent = this;
f.addEventListener('click',function(){
parent.flying();
},false);
document.body.appendChild(f);
this.setmove = function(id) {
var parent = this;
if (!parent.move_strange){
if (y >= (sh-50) || Math.random() < 0.005) {
yy = -yy;
c();
} else if (y <= 1 || Math.random() < 0.005) {
yy = -yy;
c();
}
if (x >= (sw-50) || Math.random() < 0.005) {
xx = -xx;
c();
} else if (x <= 1 || Math.random() < 0.005) {
xx = -xx;
c();
}
}
x = x + xx;
y = y + yy;

f.style.left = Math.round(x) + "px";
f.style.top = Math.round(y) + "px";
if (Math.random() < 0.05) {
clearInterval(id);
id = setInterval(function() {
parent.p(id)
}, this.movestep);
caminando = false;
showOffset(offset);
} else {
if (caminando) {
caminando = false;
showOffset(offset);
} else {
caminando = true;
showOffset(offsetb);
}
}
};
this.p = function(id, movestep) {
var parent = this;
if (Math.random() < 0.075) {
clearInterval(id);
id = setInterval(function() {
parent.setmove(id)
}, parent.movestep);
}
};
function c() {
if (yy < 0) {
if (xx < 0) {
offset = 100;
offsetb = 150;
} else {
offset = 0;
offsetb = 50;
}
} else if (xx < 0) {
offset = 300;
offsetb = 350;
} else {
offset = 200;
offsetb = 250;
}
};
function showOffset(o) {
f.style.backgroundPosition = "0px -" + o + "px";
}
this.move = function() {
var parent = this;
var id = setInterval(function() {
parent.setmove(id);
}, parent.movestep);
}
this.flying = function() {
this.movestep = 0;
var parent = this;
timeout = Math.random() * (5000 - 2500) + 2500;
setTimeout(function(){
parent.movestep = 30;
},timeout); 
}
this.moveout = function(){
var parent = this;
var outw = 0; var outh = 0; 
if (typeof(window.innerWidth) == 'number') {
var outw = window.innerWidth;
var outh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
var outw = document.documentElement.clientWidth;
var outh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var outw = document.body.clientWidth;
var outh = document.body.clientHeight;
};
parent.move_strange = true;
var hide = setInterval(function(){
if (y >= outh-50 || x >= outw-50 || y <= 0 || x <= 0){
$("#"+parent.fid).hide();
parent.move_strange = false;
clearInterval(hide);
}
}, 30);
}
this.goback = function(){  
var parent = this;  
var outw = 0; var outh = 0; 
if (typeof(window.innerWidth) == 'number') {
var outw = window.innerWidth;
var outh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
var outw = document.documentElement.clientWidth;
var outh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var outw = document.body.clientWidth;
var outh = document.body.clientHeight;
};
parent.move_strange = true;
var show = setInterval(function(){
if (y >= outh-50 || x >= outw-50 || y <= 0 || x <= 0){
$("#"+parent.fid).show();
parent.move_strange = false; 
clearInterval(show);
}
}, 30);
}
}
$(document).ready(function() {
var this_js_script = $('script[src*=flies-obj]');
// var var_1 = 0;
// alert(var_1);
var var_1 = this_js_script.attr('var_1');// bat tat ruoi
// alert(var_1);
var var_2 = this_js_script.attr('var_2');// nhiu ruoi
var var_3 = this_js_script.attr('var_3');// nhiu ruoi
// var var_3 = this_js_script.attr('var_3');// loai ruoi
// alert(var_2);
if(var_3 == 'true'){
var height_fly  = 170;
var width_fly  =  1000;
}else{
var height_fly  =  0;
var width_fly  = 0;
}
if(var_1 == 'false'){
return false;
}
var value = Math.floor(Math.random() * 4) + 1  ;
// alert(value);
switch (value) { 
case 1: 
var fly = new Fly("test", "Nhặng", "Đen", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJ_V4M42_e_-Z45EtaSVDwHN2imiuYJSqDVjgRTgmFtIHrH3rcozeYsJdgHxefJIjyU5Q3HTuhrZTserRBBeeTQf1MKiAwbTVIucvpWGKdT7ec7REU81CZKfdVhvwMz7w32TePzcqL3Y/s1600/flies.png", "Long ruồi"); 
break;
case 2: 
var fly = new Fly("test", "Nhặng", "Xanh", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLkxEXiBTOg1SWoLvoob9DlDrZXppT8g1Ufd1GdUrr6wO47xwovbsJurUkm3JFBFuGx7jYwnLksLg8zmRJo7GFcb0XfoAzFTSjVw-fhu_srMA3k_sCRVmHjGklrdd9IBFntNb_3dckCk/s1600/style_1.png", "King ruồi");
break;
case 3: 
var fly = new Fly("test", "Nhặng", "Tuyệt sắc", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xMwTgHi6PTuIAJi3aQaO2RuVJPZBsDzN8MenAymvtrXEAaWUQij7B97Nse2kja6zT8BG_Lad0ja1pZov9OuCe3YieXCbX0sy874Rb0F71oEJ_uPwelrfQmwxefmTv6nX_t8QiiPLV-4/s1600/style_2.png","Tom ruồi");
break;  
case 4: 
var fly = new Fly("test", "Nhặng", "Hồng", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelBlGuyVVorfVZlC8FK2jCBRfBs091RxvWZT65o742wf6xYFSOu2SglB4DpX5c1mTWIxR1C2UkzT1yy2eLh8EyrpNk_G0Cv1VF5fLV1e1lbzs9RO0ukRCdoz_w3NDaCWpvYsheBKF1nk/s1600/style_3.png", "Queen ruồi");
break;
}
fly.move(); 
if(var_2 == 'true'){
var fly2 = new Fly("test", "Nhặng", "Xanh", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLkxEXiBTOg1SWoLvoob9DlDrZXppT8g1Ufd1GdUrr6wO47xwovbsJurUkm3JFBFuGx7jYwnLksLg8zmRJo7GFcb0XfoAzFTSjVw-fhu_srMA3k_sCRVmHjGklrdd9IBFntNb_3dckCk/s1600/style_1.png", "King ruồi");
// var fly3 = new Fly("test", "Nhặng", "Tuyệt sắc", 0, 0, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xMwTgHi6PTuIAJi3aQaO2RuVJPZBsDzN8MenAymvtrXEAaWUQij7B97Nse2kja6zT8BG_Lad0ja1pZov9OuCe3YieXCbX0sy874Rb0F71oEJ_uPwelrfQmwxefmTv6nX_t8QiiPLV-4/s1600/style_2.png","Tom ruồi");
// var fly4 = new Fly("test", "Nhặng", "Hồng", 0, 0, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelBlGuyVVorfVZlC8FK2jCBRfBs091RxvWZT65o742wf6xYFSOu2SglB4DpX5c1mTWIxR1C2UkzT1yy2eLh8EyrpNk_G0Cv1VF5fLV1e1lbzs9RO0ukRCdoz_w3NDaCWpvYsheBKF1nk/s1600/style_3.png", "Queen ruồi");
fly2.move();
fly2.flying();
// fly3.move();
// fly4.move();
// fly4.flying();
}
$("#btnMove").click(function() {
fly.move();
fly2.move();
fly3.move();
});
$("#btnFlying").click(function() {
fly.flying();
});
$("#btnHide").click(function() {
fly.moveout();
});
$("#btnShow").click(function() {
fly.goback();
});
});
//]]>
</script>
<!-- Ruồi end -->

Bạn cũng có thể sử dụng file javascript ruồi bò đã up lên GitHub cho gọn gàng và cũng dán vào trước thẻ </head>
<!-- Thêm ruồi -->
<script src='https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/ruoi-bo-blog.js' type='text/javascript'/>
<!-- Hết ruồi -->

Bạn cũng có thể thay con ruồi bằng con vật khác bằng cách thay hình ảnh trong file js nếu bạn biết chỉnh sửa file javascript.
Chúc thành công!
...
Code con ruồi bò trên blogspot/web- Sưu tầm
Code con ruồi bò trên blogspot/web- Sưu tầm Code con ruồi bò trên blogspot/web- Sưu tầm
10/10 365 bình chọn
Tags: Thủ thuật Blogspot
© 2018 - 2020 Trần Hà IT - designed together with the Simple Love ♥ in Hưng Yên City, Vietnam