Thread: javascript tip
View Single Post
  #3 (permalink)  
Old 01-20-2009, 10:35 PM
weegillis weegillis is offline
Moderator
WebProWorld Moderator
 
Join Date: Oct 2003
Location: Alberta, Canada
Posts: 878
weegillis RepRank 6weegillis RepRank 6weegillis RepRank 6weegillis RepRank 6weegillis RepRank 6weegillis RepRank 6weegillis RepRank 6
Default Re: javascript tip

Thanks, guys. Always fun to tinker around, and learn new things at the same time. Here's a boiled down version that works nicely as a drop-in effect on a page full of images, as suggested:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>javascript animation tip</title>
</head>
<body>
<div>
 <ul>
<li><a href="#" onclick="javascript:setInterval('A()',50); void(0);">Animation Effect</a></li>
</ul>
</div>
<script type="text/javascript"><!--
R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; 
DI=document.getElementsByTagName("img"); 
DIL=DI.length; 
function A(){
 for(i=0; i-DIL; i++){
  DIS=DI[ i ].style; 
  DIS.position='absolute'; 
  DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; 
  DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px";
 }
 R++;
}
//--></script>
</body>
</html>

Last edited by weegillis; 01-20-2009 at 10:37 PM. Reason: typos
Reply With Quote