| ||
|
|
| |
| ||
| ||
| Inside Technique : Fun with Graphics : Weave This program produces an eye-catching visual effect of a dynamic weave. There is nothing to do but look at it. The program uses dynamic element creation to produce individual DIV elements which are then scrolled to produce the effect. The Codew holds the 64 elements of the weave. The interlaced effect is merely an effect, we create a chequerboard pattern, and animate the inner squares. <HTML> <HEAD> <TITLE>Weave</TITLE> <SCRIPT> w=new Array(); d=0; bs() scrolls the weave
function bs() {
d+=4;
for (i=0;i<32;i++) {
if ((Math.floor(i/4)%2)!=0) {
w[i*2].style.backgroundPositionX=d;
w[i*2+1].style.backgroundPositionY=-d;
}
else {
w[i*2+1].style.backgroundPositionX=d;
w[i*2].style.backgroundPositionY=-d;
}
}
setTimeout('bs()',5);
}
weave() creates the DIV elements which creates the weave.
function weave() {
for (i=0;i<8;i++)
for (j=0;j<8;j++) {
k=i*8+j;
nw=document.createElement('DIV');
nw.style.position='absolute';
nw.style.top=i*50;
nw.style.left=j*50;
nw.style.width=50;
nw.style.height=50;
nw.style.background=(((k%2)+(i%2))%2==0)?'url(up.jpg)':'url(left.jpg)';
w[k]=document.body.appendChild(nw);
}
}
</SCRIPT>
</HEAD>
<BODY onload="weave();bs();">
</BODY>
</HTML>
This would make a good chessboard! Jon Perry is a freelance Author and Programmer from England. Page 1:Fun with Graphics © 1997-2000 InsideDHTML.com, LLC. All rights reserved. |