»
Tiếng AnhTiếng PhápTiếng Việt

In - Các ô vuông di chuyển - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Vui nhộn » Các ô vuông di chuyển
URL: https://www.javascriptbank.com/wriggly.html

Các ô vuông di chuyển © JavaScriptBank.comHiệ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



JavaScript
<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-->