TutorialBlog: Rotirajuce slike

Primjer:

Kopiraj i zalijepi gdje zelis rotirajuce slike:

<script type='text/javascript'>
<!--
// Größe und Position anpassen
var zx,zy;
var mittex = 100;
var mittey = 50;
var radius = 100;
var speed  = 2; // 1-10... + oder - für Richtung
var bilder_i = 0;
var bilder = new Array();
var alpha = new Array();

// hier die Bilder anpassen
// Syntax: Link-URL => Bild-URL
bilder[bilder_i++] = 'http://twitter.com/kostenlosejavas => http://www.kostenlose-javascripts.de/modules/mod_followme/images/followme_left.png';
bilder[bilder_i++] = 'http://de.jimdo.com/#ref=a869611 => http://www.kostenlose-javascripts.de/images/stories/logo_jimdo.gif';
bilder[bilder_i++] = 'http://www.kostenlose-javascripts.de => http://www.kostenlose-javascripts.de/images/stories/_melon.gif';
bilder[bilder_i++] = 'http://www.mozilla.com/firefox?from=sfx&uid=258744&t=331 => http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/125x125FF3.png';

// ab hier nichts mehr ändern
function initRotat() {
	alpha_tmp = 0;
	speed = speed / 1000;
	for ( var i = 0; i < bilder.length; i++)
	{
		alpha[i] = 6.28 / (bilder.length) + alpha_tmp; // 0,1.6,3.2,4.8
		var tmp = bilder[i].split(" => ");
		document.write('<div id="icon'+i+'" style="position:absolute;"><a href="'+tmp[0]+'"><img src="'+tmp[1]+'" alt="" border="0" /></a></div>');
		alpha_tmp = alpha[i];
	}
}
function pol_zu_kart(mx,my,radius,alp)
{
	zx = mx + (radius * Math.sin(alp));
	zy = my + (radius * Math.cos(alp));
}

function weiterdrehen()
{
	for (var i = 0; i < bilder.length; i++)
	{
		alpha[i]+=speed;
		if (speed>0)
		{
			if(alpha[i]>6.28) alpha[i]-=6.28;
		}
		else
		{
			if(alpha[i]<0) alpha[i]+=6.28;
		}
		pol_zu_kart(mittex,mittey,radius,alpha[i]);

document.getElementById('icon'+i).style.top=zy+'px';
		document.getElementById('icon'+i).style.left=zx+'px';
	}
}
initRotat();
//-->
</script>
<br />
<div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/dsl-anbieter-vergleich.html" title="DSL Anbieter Vergleich" target="_blank">DSL Anbieter Vergleich</a></div>
<br />
<script type="text/javascript">status = window.setInterval("weiterdrehen()",10);</script>

TutorialBlog

utorak, 26. ožujka 2013.

Rotirajuce slike

Nema komentara:

Objavi komentar