Newsgroup: it.comp.lang.javascript
Titolo: autoscrolling automatico multidirezionale

Ciao a tutti,
vedo che in certi siti mostrano immagini grandi dentro a un div e le fanno 
scorrere automaticamente in varie direzioni .
Praticamente il div fa da maschera e si vede solo l'immagine dentro al div 
mentre quella eccedente si vede solo mano a mano che lo scorrimento lo 
permette creando bellissimi effetti.
Sapete dove trovare un esempio semplice da scaricare tanto per capire come 
si fa ?
Grazie 

 fanno scorrere automaticamente in varie direzioni . 
mai visto (se non con applet java), un esempio?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>panotama</TITLE>
<script type="text/javascript">
var Timer;
function ScrollLeft()
{var pixelsleft=document.getElementById('PANORAMA').scrollLeft;
alert(pixelsleft);
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 
15);
}
function ScrollRight()
{var pixelsleft=document.getElementById('PANORAMA').scrollLeft;
alert(pixelsleft);
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 
15);
}
function STT()
{ Timer = setInterval(basso, 1);}
function basso()
{
document.getElementById('PANORAMA').scrollTop+=1;
if (document.getElementById('PANORAMA').scrollTop>=500)
{
clearInterval(Timer);
Timer = setInterval(alto, 1);}
}
function alto()
{
document.getElementById('PANORAMA').scrollTop-=1;
if (document.getElementById('PANORAMA').scrollTop<=150)
{
clearInterval(Timer);
Timer = setInterval(basso, 1);
}
}
</script>
</HEAD>
<body onload="STT();">
<div id="PANORAMA" style="width:800px; height:150px; border:1px solid 
red;overflow:hidden">
<img src="IMAGES/FOTOGRANDISSIMA.jpg" />
</div>
</BODY>
</HTML>

Cristiano Larghi ha scritto:

Mai sentito parlare di framework javascript tipo mootools?
Ti scarichi le estensioni del framework che ti servono, ti leggi un po' 
di documentazione, e il gioco è fatto.
In questo sito trovi un po' di effetti carini:
http://www.electricprism.com/aeron/slideshow/
Qui c'è un esempio del codice di una pagina che utilizza l'estensione di 
KenBurns relativa al link che ti ho indicato sopra.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
 
<!-- START script per caricare le img in dissovenza direttamente dalla 
directory-->
<script src='mootools_slideshow/js/moo1.js'></script>
<link rel="stylesheet" type="text/css" 
href="mootools_slideshow/css/slideshow.css" media="screen" />
<script type="text/javascript" 
src="mootools_slideshow/js/slideshow.js"></script>
<script type="text/javascript" 
src="mootools_slideshow/js/lightbox.js"></script>
   <script type="text/javascript" 
src="mootools_slideshow/js/slideshow.kenburns.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
	  window.addEvent('domready', function(){
	    var data = {
	      'Fiori astratti.jpg': { caption: '' },
	      'gourmet-kategorie.jpg': { caption: '' },
	      't18.jpg': { caption: '' },
		  'Tulipani.jpg': { caption: '' },
	      'Tropici.jpg': { caption: '' }
	    };
var myShow = new Slideshow.KenBurns('show', data, { captions: true, 
controller: false, delay: 4000, duration: 1000, height: 280, hu: 
'img_sud_Centro_Nord/', width: 340 });
		});
	//]]>
	</script>
</head>
<body>
   <h1>mootools slideshow </h1>
<p>&nbsp;</p>
<div id="show" class="slideshow">
     <a rel="lightbox" href="#">
     </a>
   </div>
</body>
</html>