Chuột có ngôi sao bay quanh

[JavaScriptBank]

Hiệu ứng tạo ra các đốm vàng bay quanh con trỏ chuột (http://www.javascriptbank.com/javascript/mouse/) sau đó hội tụ tại một điểm. Một hiệu ứng JavaScript rất đẹp và hữu ích ... chi tiết (http://www.javascriptbank.com/dancing-animation-stars-cursor.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)


http://www.javascriptbank.com/javascript.images/mouse/dancing-animation-stars-cursor.jpg (http://www.javascriptbank.com/javascript/mouse/trailer/dancing-animation-stars-cursor/preview/vi/)
Demo: JavaScript Chuột có ngôi sao bay quanh (http://www.javascriptbank.com/dancing-animation-stars-cursor.html/vi/)
| JavaScript Dancing Animation Stars Cursor (http://www.javascriptbank.com/dancing-animation-stars-cursor.html)

Cách cài đặt

Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript

<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at [email protected])
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background: #FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}

else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
for ( i = 0 ; i < totaldivs ; i++ )
{
var tempdiv=document.all.starsDiv.all[i].style
tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
}

else if (document.layers)
{
for ( j = 0 ; j < 7 ; j++ )
{
var templayer="a"+j
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>



Đoạn mã tương tự
- Hệ thống đánh giá bằng ngôi sao (http://www.javascriptbank.com/rating-star-system-index.html/vi/)
- Ngôi sao nổ (http://www.javascriptbank.com/vml-fireworks-script.html/vi/)
- Các ngôi sao bay (http://www.javascriptbank.com/flying-stars-ii.html/vi/)


Một vài nhãn tương tự: ngôi sao (http://www.javascriptbank.com/vi+tag=ngôi sao), bay quanh (http://www.javascriptbank.com/vi+tag=bay quanh), đốm vàng (http://www.javascriptbank.com/vi+tag=đốm vàng), con trỏ chuột (http://www.javascriptbank.com/vi+tag=con trỏ chuột), hội tụ (http://www.javascriptbank.com/vi+tag=hội tụ), hữu ích (http://www.javascriptbank.com/vi+tag=hữu ích), trang trí (http://www.javascriptbank.com/vi+tag=trang trí), hiệu ứng (http://www.javascriptbank.com/vi+tag=hiệu ứng)
Bạn có thể xem thêm nhiều JavaScript khác về Con trỏ (http://www.javascriptbank.com/javascript/mouse/vi/) và Di chuyển theo chuột (http://www.javascriptbank.com/javascript/mouse/trailer/vi/)





Menu trượt ở đầu trang web (http://www.javascriptbank.com/javascript/menu/floatable/vi/) - Code tuyết rơi (http://www.javascriptbank.com/vi+title=tuyết rơi) - Hiệu ứng ảnh mờ ảo bằng JavaScript (http://www.javascriptbank.com/vi=ảnh mờ ảo)