Phiên bản đầy đủ: jsB@nk » Vui nhộn » Các ô vuông di chuyển
URL: https://www.javascriptbank.com/wriggly.html
Hiệu ứng tạo ra các ô vuông di chuyển tự do trong website.
Phiên bản đầy đủ: jsB@nk » Vui nhộn » Các ô vuông di chuyển
URL: https://www.javascriptbank.com/wriggly.html
<script>if ((document.getElementById) && window.addEventListener || window.attachEvent){(function(){//Configure here....var colours = new Array('#ff0000','#00ff00','#ffa500','#fff000');var num = 10; //number of segments.var icen = 2; //next segment is times 'icen' previous segment size.var rep = 40; //setTimeout speed.var min = 0; //slowest speed.var max = 10; //fastest speed.//End.var temp1 = new Array();var temp2 = new Array();if (icen%2 != 0) icen++;var fcen = icen/2;var d = document;var idx = d.getElementsByTagName('div').length;var dims;for (i = 0; i < num; i++){var randcol = colours[Math.floor(Math.random()*colours.length)];var dims = (i+1) * icen;document.write('<div id="worm'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;font-size:1px;border: 1px solid '+randcol+';overflow:hidden">.<\/div>');}var h,w,r;var y = 0;var x = 0;var dir = 45; //direction.var acc = 1; //acceleration.var newacc = new Array(1,0,1);var vel = 1; //initial speed.var sev = 0;var newsev = new Array(8,-8,5,-5,3,-3,1,-1,0);//counters.var c1 = 0; //time between changes.var c2 = 0; //new time between changes.var pix = "px";var strictmod = ((document.compatMode) && document.compatMode.indexOf("CSS") != -1);var domWw = (typeof window.innerWidth == "number");var domSy = (typeof window.pageYOffset == "number");if (domWw) r = window;else{ if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) r = d.documentElement; else{ if (d.body && typeof d.body.clientWidth == "number") r = d.body; }}function winsize(){var oh,sy,ow,sx,rh,rw;if (domWw){ if (d.documentElement && d.defaultView && typeof d.defaultView.scrollMaxY == "number"){ oh = d.documentElement.offsetHeight; sy = d.defaultView.scrollMaxY; ow = d.documentElement.offsetWidth; sx = d.defaultView.scrollMaxX; rh = oh-sy; rw = ow-sx; } else{ rh = r.innerHeight; rw = r.innerWidth; }h = rh - (dims+fcen+1);w = rw - (dims+fcen+1);}else{h = r.clientHeight - (dims+fcen+1);w = r.clientWidth - (dims+fcen+1);}}function scrl(yx){var y,x;if (domSy){ y = r.pageYOffset; x = r.pageXOffset; }else{ y = r.scrollTop; x = r.scrollLeft; }return (yx == 0)?y:x;}function followleader(){ for (i = 0; i < num; i++){ if (i < num-1){ temp1[i].top = parseFloat(temp2[i].top) + fcen + pix; temp1[i].left = parseFloat(temp2[i].left) + fcen + pix; } else{ temp1[i].top = y + scrl(0) + pix; temp1[i].left = x + scrl(1) + pix; } }}function newpath(){sev = newsev[Math.floor(Math.random()*newsev.length)];acc = newacc[Math.floor(Math.random()*newacc.length)];c2 = Math.floor(10+Math.random()*50);}function animate(){var vb,hb,dy,dx,curr;if (acc == 1) vel +=0.05;if (acc == 0) vel -=0.05;if (vel >= max) vel = max;if (vel <= min) vel = min;c1++;if (c1 >= c2){ newpath(); c1=0;}curr = dir+=sev;dy = vel * Math.sin(curr*Math.PI/180);dx = vel * Math.cos(curr*Math.PI/180);y+=dy;x+=dx;//horizontal-vertical bounce.vb = 180-dir;hb = 0-dir;//Corner rebounds?if ((y < 1) && (x < 1)){y = 1; x = 1; dir = 45;}if ((y < 1) && (x > w)){y = 1; x = w; dir = 135;}if ((y > h) && (x < 1)){y = h; x = 1; dir = 315;}if ((y > h) && (x > w)){y = h; x = w; dir = 225;}//edge rebounds.if (y < 1) {y = 1; dir = hb;} if (y > h) {y = h; dir = hb;} if (x < 1) {x = 1; dir = vb;} if (x > w) {x = w; dir = vb;} followleader();setTimeout(animate,rep);}function init(){for (i=0; i < num; i++){ temp1[i] = document.getElementById("worm"+(idx+i)).style; if (i < num-1) temp2[i] = document.getElementById("worm"+(idx+(i+1))).style; }winsize();var iniafter = Math.floor(500+Math.random()*2000);setTimeout(animate,iniafter);}if (window.addEventListener){ window.addEventListener("resize",winsize,false); window.addEventListener("load",init,false);} else if (window.attachEvent){ window.attachEvent("onresize",winsize); window.attachEvent("onload",init);} })();}//End.</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->