FLYING RING OF IMAGES

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

FLYING RING OF IMAGES

Beitrag von Hape »

Dieses JavaScript erstellt einen lustigen fliegenden Bilderring. Dieser Ring wird permanent verkleinert und vergrößert, während er auf Ihrer Webseite schwebt. Sie können beliebig viele Bilder hinzufügen. Einfache Konfiguration von Größe und Transparenz.

Code: Alles auswählen

<!---------------------------------------------->
<!-- START OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->
<script>
// CREDITS:
// JavaScript carousel slideshow
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

// MOVEMENT CREDITS:
// The Movements of this script are based upon a Multi-Fx1 Script 
// by kurt.grigg@virgin.net

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 

// Set the URLS of your images. Add as many images as you like
var myimage=new Array("flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png")

// Set the width of your images. All images will be set to this width
var imgwidth=40

// Set the maximal size of carousel (px)
var maxcarouselsize=240

// Set the minimal size of carousel (px)
var mincarouselsize=1

//Set the opacity od the images. values my range from 0 to 100
var imgopacity=70

// Do not edit below this line
var divider=(36/(myimage.length+1))
var step=0.1;
var a_StEp=0.05;
var RunTime=10;
var currStep = 0;
var x_coordinate = 0;
var y_coordinate = 0;
var cntr=2;
var screenheight=document.body.clientHeight
var screenwidth=document.body.clientWidth

function fly(){
	y_coordinate=document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
	x_coordinate=document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/10);

	RunTime+=a_StEp;
	Tma=setTimeout("fly()", 15);
}

function cycle(){
 	for (i=0;i<myimage.length;i++) {
 			document.getElementById(i).style.top=y_coordinate+cntr*Math.cos(((currStep+1)+i*divider)/5)*Math.cos(currStep/6)+"px"
 			document.getElementById(i).style.left=x_coordinate+cntr*Math.sin(((currStep+1)+i*divider)/5)+"px";
			if (parseInt(document.getElementById(i).style.left) > (document.body.scrollLeft+document.body.offsetWidth-(1.7*imgwidth)) || parseInt(document.getElementById(i).style.top) > (document.body.scrollTop+document.body.offsetHeight-(1.5*imgwidth))) {
				document.getElementById(i).style.left=-2000+"px"
				document.getElementById(i).style.top=-2000+"px"
			}
 	}
	currStep+=step;
	setTimeout("cycle()",5);
}

function minimize() {
	cntr-=0.5;
	goshrink=setTimeout('minimize()',10);
	if (cntr <=mincarouselsize) {
		clearTimeout(goshrink);
		swell()
	}
}

function swell() {
	cntr+=0.5;
	GoSwell=setTimeout('swell()',10);
	if (cntr >=maxcarouselsize) {
		clearTimeout(GoSwell);
		minimize()
	}
}

function init(){
	fly();
	cycle();
	minimize();
}


	for (i=0;i<=myimage.length-1;i++) {
		document.write('<div id="'+i+'" style="position:absolute;top:-5000px;left:0px;filter:alpha(opacity='+imgopacity+');opacity:'+(imgopacity/100)+';"><img src="'+myimage[i]+'" width='+imgwidth+'></div>')
	}

window.onload=init;

</script>

<!---------------------------------------------->
<!-- END OF CODE FOR IMAGE RING SCRIPT -->
<!---------------------------------------------->
Demoseite dazu hier: Flying-Ring


flower.png
flower.png (26.6 KiB) 7923 mal betrachtet
flowergreen.png
flowergreen.png (21.26 KiB) 7923 mal betrachtet
flowerorange.png
flowerorange.png (20.81 KiB) 7923 mal betrachtet

Antworten