Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Con trỏ chuột 'kiểu đũa phép'
URL: https://www.javascriptbank.com/magic-wand-stars-cursor.html
Hiệu ứng làm cho con trỏ chuột trên trang web của bạn có một vòng sáng gồm các điểm nhỏ nhiều màu sắc bay chung quanh theo các quĩ đạo khác nhau.Hiệu ứng thích hợp với các trang web có nền màu đen, trông giống như bạn đang quẩy một 'cây đũa phép'-con trỏ chuột để thực hiện các phép thuật!Có lẽ vậy mà tác giả đặt tên cho hiệu ứng là Magic Wand cursor chăng?! Bạn hãy thử xem sao!
Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Con trỏ chuột 'kiểu đũa phép'
URL: https://www.javascriptbank.com/magic-wand-stars-cursor.html
<script language="JavaScript">/*Magic Wand cursor (By Kurt at [email protected])Modified and permission granted to Dynamic Drive to feature script in archiveFor full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com*/if (document.all){with (document){write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>')write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>')write('</div>')}}var Clrs=new Array(6)Clrs[0]='ff0000';Clrs[1]='00ff00';Clrs[2]='000aff';Clrs[3]='ff00ff';Clrs[4]='fff000';Clrs[5]='fffff0';if (document.layers){window.captureEvents(Event.MOUSEMOVE);}var yBase = 200;var xBase = 200;var step;var currStep = 0;var Xpos = 1;var Ypos = 1;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){ for ( i = 0 ; i < starsDiv.all.length ; i++ ) {step=3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai=0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background=Clrs[c]; }}else if (document.layers){ for ( j = 0 ; j < 14 ; j++ ) //number of NS layers! {step = 4; var templayer="a"+j document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor=Clrs[c]; }}currStep+= step;setTimeout("animateLogo()", 10);}animateLogo();// --></script><LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER><LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER><LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER><LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER><LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER><LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER><LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER><LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER><LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER><LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER><LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER><LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER><LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER><LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER>