[Code] Tạo chữ bay vòng vòng theo chuột

[vanhensy]

Bài đầu tiên share trên nên thiếu kinh nghiệm. Có gì mong các bạn thông cảm.
Không biết cái này có ai share chưa.Thấy nhiều bạn hỏi xin nên hôm nay share cho mọi người.
Cũng đơn giản thôi.
Demo:

Code:

forum.11b1.biz

Bạn nào làm biếng thì chèn code sau vào cuối Overall-header là xong

Code:

<script src="http://www.forum.11b1.biz/16525.js" type="text/javascript"></script>

Còn đây là hướng dẫn :
Trước tiên tạo một Java script

Code:

;(function(){
var msg = "Thông điệp của bạn";
var size = 18;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.7;
var speed = 0.5;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

Sau đó lấy link script cho vào đây

Code:

<script src="link js vừa tạo" type="text/javascript"></script>

rồi đặt vào Overall_header
=> Chiêm ngưỡng thôi.
Có thể kèm thêm hiệu ứng trái tim bay theo chuột nữa
Xem Demo tại đây:

Code:

forum.11b1.biz/h9-page

Nếu bài viết đạt 25 thanks mình sẽ share hiệu ứng này.Hii(Phải xứng với công sức tìm kiếm chứ)
Hình như còn thiếu đoạn CSS này. Các bạn bổ sung nha.

Code:

#outerCircleText {
  font-weight: bold;font-size:12;
font-family: 'times new roman';
color: #0055A8;
position: absolute;top: 0;left: 0;z-index: 999;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

[LulzSec]

Tks bác cái đầu tiên nè

[handsomevip007]

script gì mà có dấu phẩy ở đầu ngộ vậy

;(function(){

[vanhensy]

Hihi. Bác yên tâm. Thành công 100%

[nguyenhoanganh]

co thấy gì đâu

[thanhcong96]

mình chèn vào rồi có thấy gì đâu ?

[ZerO kIng 2]

Cái này là code [Code] Thay đổi con trỏ chuột thui có gì đu . Nếu không hiện thì:

1. con trỏ chữ vog vòng này bị hư
2. Thiếu CSS,...
3. Không áp dụng với 1 số phiên bản.

[Kiến]

Có thể kèm thêm hiệu ứng trái tim bay theo chuột nữa
Xem Demo tại đây:

Code:

forum.11b1.biz/h9-page

Nếu bài viết đạt 25 thanks mình sẽ share hiệu ứng này.Hii(Phải xứng với công sức tìm kiếm chứ)

Cái dại của bạn là đưa live demo lên
Các cao thủ thấy lại Ctrl + U là mất trắng.
p/s: Đã vote.

[Eagle8x]

Nếu là code sưu tầm thì cần ghi cái nguồn vào bạn nhé.

Spoiler:

[ZerO kIng 2]

Ôi mẹ ơi, không để ý cái đemo, ai tung ảnh khỏa tờ rân lên web thế này

[Ocean Sapphire]

Chuẩn, Kiến nói đúng, trang nào thì còn giấu được chứ đưa nguyên cái html lên là thôi, tiêu rồi
khuyên bạn nên sửa nhanh cái trang h4 đi, thay bằng cái hình PrtSc thì sẽ tốt hơn.

[vanhensy]

Hihi. Thiếu cái CSS. Xin lỗi các bạn. Bạn nào Pro cứ Ctr-U. MÌnh cũng Ctr-U của người ta mà. Hihi. Thanks anh Eagle share. Cái này em lấy của EAZY.

[Lee Yu]

có cách nào làm nó chạy chậm lại ko

[Draudrey]

có cách nào làm nó chạy chậm lại ko

trong JS. bạn tìm code nì

Code:

var speed = 0.5;

thay 0.5 = 0.2 ; 0.1 ; 0.3 (nếu thích nhanh hay châm )

[minhtamag]

KHÔNG TÁC DỤNG, BUỒN!

[hoalongbaby]

Cho Em thêm ý kiến nhé cái này là forum em đang dùng làm như trên lun nhưng cái Javascrpit thì đỗi thành cái này!

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text='Diễn Đàn ☼—8TC2 And 8TC1 ™';



var delay=40; // SPEED OF TRAIL

var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#000000"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.



//********** NO NEED TO EDIT BELOW HERE **********\\



ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';



for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);



function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}



function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}



function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}



function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}



function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}



function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}



window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

[campha@64]

Còn cái hiệu ứng trái tim thì sao? Code đâu? Chèn ở đâu vậy!?^^

[vanhensy]

Có mỗi 4thanks sao share code trái tim... Hix. Bấm thanks cái đi. Hihi.
Không có tác dụng là sao hả bạn ??? mình thấy nhiều bạn làm được rồi mà ???

[Sponsored content]