- Home Page
- > Script DHTML
- > Script DHTML Images
- > Toy balloons
Toy balloons
Toy balloons on the screen.
<script language="JavaScript" SRC="moveobj.js"> </script>
<script>
var chip1;
var chip2;
var chip3;
//add or delete more variables, depending on how many images you're using
function pagestart()
{checkbrOK();
chip1=new Chip("chip1",60,80);
chip2=new Chip("chip2",60,80);
chip3=new Chip("chip3",60,80);
//add or delete more of the above, depending on how many images you're using
if(brOK)
{ movechip("chip1");
movechip("chip2");
movechip("chip3");
//add or delete more of the above, depending on how many images you're using
}
}
</script>
<DIV ID="chip1" STYLE="position:absolute; width:47; height:68;">
<A HREF="some.html"><IMG SRC="ballon3.gif" BORDER=0></a>
</DIV>
<DIV ID="chip2" STYLE="position:absolute; width:47; height:68;">
<A HREF="some.html"><IMG SRC="ballon4.gif" BORDER=0></a>
</DIV>
<DIV ID="chip3" STYLE="position:absolute; width:47; height:68;">
<A HREF="some.html"><IMG SRC="ballon2.gif" BORDER=0></a>
</DIV>
<body onLoad="pagestart();" onUnload="if(brOK) {stopme('chip1');
stopme('chip2'); stopme('chip3');}" >
</body>
File moveobj.js
var brOK=false;
var mie=false;
var aver=parseInt(navigator.appVersion.substring(0,1));
var aname=navigator.appName;
function checkbrOK()
{if(aname.indexOf("Internet Explorer")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();
mie=true;
}
if(aname.indexOf("Netscape")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();}
}
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname)
{
if(brOK)
{eval("chip="+chipname);
if(!mie)
{pageX=window.pageXOffset;
pageW=window.innerWidth-20;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else
{pageX=window.document.body.scrollLeft;
pageW=window.document.body.offsetWidth-20;
pageY=window.document.body.scrollTop;
pageH=window.document.body.offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX)
{chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w)
{chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
if(document.layers)
{eval('document.'+chip.named+'.top ='+chip.yy);
eval('document.'+chip.named+'.left='+chip.xx);
}
else if (document.all)
{eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
}
else if (document.getElementById)
{document.getElementById(chip.named).style.left=chip.xx;
document.getElementById(chip.named).style.top =chip.yy;
}
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function stopme(chipname)
{if(brOK)
{//alert(chipname)
eval("chip="+chipname);
if(chip.timer1!=null)
{clearTimeout(chip.timer1)}
}
}
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.