Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Chuột có bông tuyết
URL: https://www.javascriptbank.com/snowing-flake-trail.html
Hiệu ứng tạo ra các bông tuyết rơi xuống đáy trang web khi ta di chuyển chuột, các bông tuyết này sẽ co kích thuớc nhỏ dần và sau đó tan mất.
Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Chuột có bông tuyết
URL: https://www.javascriptbank.com/snowing-flake-trail.html
<SCRIPT language=Javascript><!--/* Written by: * Terry Yuen. * Works inspired by Tendertron cartoons. * "This one's for the kids!" */var ITEM_COUNT = 6; //number of flakes visible per timevar ITEM_W = 20; //width of a single flakevar ITEM_H = 20; //height of a single flakevar ITEM_SRC = "star.gif";var ITEM_STAGES = 10; //number of life stages for a single flake. (i.e., number of states on the "star.gif")var ITEM_TRAVEL = 20; //number of times to move a flake before disappearing (Note: PIXEL MOVED = ITEM_TRAVEL * ITEM_INCREMENT)var ITEM_INCREMENT = 4; //distance to move a flake on each loopvar ITEM_SPEED = 50; //time delay in milliseconds before looping (def: 40)// END CONFIGURABLE CONSTANTSvar IE_ENGINE = (document.all) ? true : false;var NS_ENGINE = (document.layers) ? true : false;var animatorThread = null; // To prevent a new flake from being created // on each loop time, we give it a sleep counter // that increments.var sprawnSleeping = 0; // Stores the position of mouse.var mousePos = new Array(2);mousePos[0] = 0;mousePos[1] = 0; // Stores previous positions of mouse. // So that we don't create a flake when // the mouse hasn't moved.var oldMousePos = new Array(2);oldMousePos[0] = 0;oldMousePos[1] = 0; // A table of flake positions and information.var trailMatrix = new Array(ITEM_COUNT);for(var i=0; i<trailMatrix.length; i++) { trailMatrix[i] = new Array(5); trailMatrix[i][0] = 0; trailMatrix[i][1] = 0; trailMatrix[i][2] = 0; trailMatrix[i][3] = ITEM_STAGES; trailMatrix[i][4] = "mouseTrailer_" + i; document.writeln((IE_ENGINE) ? '<DIV ID="' + trailMatrix[i][4] + '" STYLE="position:absolute; width:'+ITEM_W+'px; height:'+ITEM_H+'px; visibility:hidden;"><img src="'+ITEM_SRC+'" border=0></DIV>' : (NS_ENGINE) ? '<LAYER ID="' + trailMatrix[i][4] + '" position="absolute" width='+ITEM_W+' height='+ITEM_H+' visible="hide"><img src="'+ITEM_SRC+'" border=0></LAYER>' : "");}function storeMousePos(e) { mousePos[0] = (IE_ENGINE) ? event.clientX+document.body.scrollLeft : (NS_ENGINE) ? e.pageX : 0; mousePos[1] = (IE_ENGINE) ? event.clientY+document.body.scrollTop : (NS_ENGINE) ? e.pageY : 0;}function sprawnNewTrail() { if(oldMousePos[0] != mousePos[0] || oldMousePos[1] != mousePos[1]) { var temp = trailMatrix[trailMatrix.length-1][4]; for(var i=trailMatrix.length-1; i>0; i--) { trailMatrix[i][0] = trailMatrix[i-1][0]; trailMatrix[i][1] = trailMatrix[i-1][1]; trailMatrix[i][2] = trailMatrix[i-1][2]; trailMatrix[i][3] = trailMatrix[i-1][3]; trailMatrix[i][4] = trailMatrix[i-1][4]; } trailMatrix[0][0] = mousePos[0]; trailMatrix[0][1] = mousePos[1]; trailMatrix[0][2] = ITEM_TRAVEL; trailMatrix[0][3] = ITEM_STAGES; trailMatrix[0][4] = temp; //id for trailer layer } oldMousePos[0] = mousePos[0]; oldMousePos[1] = mousePos[1];}function animateTrail() { for(var i=0; i<trailMatrix.length; i++) { if(trailMatrix[i][2] > 0) { trailMatrix[i][1] += ITEM_INCREMENT; trailMatrix[i][2]--; trailMatrix[i][3] = Math.ceil((trailMatrix[i][2] * ITEM_STAGES) / ITEM_TRAVEL); updateTrail(trailMatrix[i][4], trailMatrix[i][0], trailMatrix[i][1], trailMatrix[i][3]); } else { hideTrail(trailMatrix[i][4]); } } sprawnSleeping++; if(sprawnSleeping >= 2) { //We create a new flake every 2 loops sprawnSleeping = 0; sprawnNewTrail(); }}function updateTrail(obj, x, y, stage) { var imgTop = (ITEM_STAGES - stage) * ITEM_H; if(IE_ENGINE) { document.all[obj].style.clip = "rect("+imgTop +" "+ ITEM_W +" "+ (imgTop+ITEM_H)+" 0)"; document.all[obj].style.left = x; document.all[obj].style.top = y - imgTop; document.all[obj].style.visibility = "visible"; } else if(NS_ENGINE) { document.layers[obj].clip.top = imgTop; document.layers[obj].clip.bottom = imgTop + ITEM_H; document.layers[obj].left = x; document.layers[obj].top = y - imgTop; document.layers[obj].visibility = "show"; }}function hideTrail(obj) { if(IE_ENGINE) { document.all[obj].style.visibility = "hidden"; } else if(NS_ENGINE) { document.layers[obj].visibility = "hide"; }}function init() { if(NS_ENGINE)document.captureEvents(Event.MOUSEMOVE); if(IE_ENGINE || NS_ENGINE) { document.onmousemove = storeMousePos; animatorThread = setInterval("animateTrail()", ITEM_SPEED); }}function end() { if(animatorThread != null) { clearInterval(animatorThread); animatorThread = null; }}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init()><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->