javascript tip

sushil · #1 (**permalink**) 01-20-2009, 02:12 AM

This is a really cool javascript trick that you can try out. Paste the following code into the address bar when any website with images is loaded. It is best used in uniform size pictures such as the one in Google images

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++}se tInterval(’A()’,50); void(0);

To stop the animation, just click on your browser’s refresh button.

**wige** · #2 (**permalink**) 01-20-2009, 11:12 AM

Hm... I just get error messages... Just as a test:

Code:

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++}setInterval('A()',50); void(0);

This seems to work (above the quotes are converted to high-ascii versions).

**weegillis** · #3 (**permalink**) 01-20-2009, 10:35 PM

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>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
AJAX and javascript calling javascript	krnl	Web Programming Discussion Forum	14	11-18-2007 11:00 AM
Javascript + RSS + RSS = ?	ofoglada	Web Programming Discussion Forum	6	02-05-2006 06:33 AM
javascript	souvik das	Submit Your Logo For Review	2	02-25-2005 11:40 AM
XP SP2, IE and Javascript	ChrisBowd	Graphics & Design Discussion Forum	1	08-26-2004 08:23 AM
Javascript and php	icb01co2	Web Programming Discussion Forum	1	08-09-2004 11:25 AM