文字をおどらせる (なめらかバージョン)      
Sample
ここをクリックして新しいウインドウを開いてください。

ソース
<HTML>
<HEAD>
<TITLE>Java-Script</TITLE>

<SCRIPT language=JavaScript>
<!--
i=0;j=1;k=1;l=0;m=0;n=0;time=0;
x1=0;y1=0;x11=0;y11=0;
x2=0;y2=0;x22=0;y22=0;
x3=0;y3=0;x33=0;y33=0;
x4=0;y4=0;x44=0;y44=0;
x5=0;y5=0;x55=0;y55=0;
x6=0;y6=0;x66=0;y66=0;
x7=0;y7=0;
xp=screen.width*7/10;
yp=screen.height*7/10;
function mov_Image(){
  if(j==1){i=i+10;}
  else if(j==2){i=i-10;}
  if(k==1){l=l+10;}
  else if(k==2){l=l-10;}
  document.all["moji7"].style.pixelLeft = x7;
  document.all["moji7"].style.pixelTop = y7;
  document.all["moji6"].style.pixelLeft = x6;
  document.all["moji6"].style.pixelTop = y6;
  document.all["moji5"].style.pixelLeft = x5;
  document.all["moji5"].style.pixelTop = y5;
  document.all["moji4"].style.pixelLeft = x4;
  document.all["moji4"].style.pixelTop = y4;
  document.all["moji3"].style.pixelLeft = x3;
  document.all["moji3"].style.pixelTop = y3;
  document.all["moji2"].style.pixelLeft = x2;
  document.all["moji2"].style.pixelTop = y2;
  time += 0.2;
  m=30*Math.cos(time);
  n=60*Math.sin(time);
  x1=i+m;  y1=l+n;
  document.all["moji1"].style.pixelLeft = x1;
  document.all["moji1"].style.pixelTop = y1;
  x7=x66;  y7=y66;  x66=x6;  y66=y6;
  x6=x55;  y6=y55;  x55=x5;  y55=y5;
  x5=x44;  y5=y44;  x44=x4;  y44=y4;
  x4=x33;  y4=y33;  x33=x3;  y33=y3;
  x3=x22;  y3=y22;  x22=x2;  y22=y2;
  x2=x11;  y2=y11;  x11=x1;  y11=y1;
  if (i>=xp){j=2;}
  if (i<=0){j=1;}
  if (l>=yp){k=2;}
  if (l<=0){k=1;}
  setTimeout("mov_Image()",40);
}
// -->
</SCRIPT>

</HEAD>
<body bgcolor=white onLoad="mov_Image()">
<div id="moji1" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=red><b>★</b></font></div>
<div id="moji2" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=blue><b>☆</b></font></div>
<div id="moji3" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=pink><b>♪</b></font></div>
<div id="moji4" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=orange><b>♭</b></font></div>
<div id="moji5" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=darkcyan><b>♯</b></font></div>
<div id="moji6" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=blue><b>☆</b></font></div>
<div id="moji7" style="POSITION: absolute; Z-INDEX: 
VISIBILITY: visible; TOP:200px; LEFT: 200px; width:30;">
<font size=6 color=red><b>★</b></font></div>
<br><br><br><br><br><br><br>
<FORM>
<INPUT TYPE=button VALUE="ウインドウを閉じる" onClick=window.close()>
</FORM>
<br><br>
</BODY></HTML>
ワンポイント解説
setTimeout("mov_Image()",40); で、移動するスピードを設定しています。