Javascript fliegende Welle

Gif-Bilder

Home
Software
3D Grafik
animierte Gifs
Open Source
Freeware
Begriffe
Favicons
Fotografie
Tipps Tricks
Games
Bildarchive
Fussball
Artikel
Java-Scripts
Download
Wallpaper
Lexikon
Weblog

Quellen

Freie Fonts
Freie Sounds
Gratis Grafiken
Texte kaufen
Content Klau
CSS Hilfe
CSS Design
CSS Editor
HTML Editor
Grafiktools
Keyword Info
3D Software
Blog Header
Blog Footer
WP Vorlagen
WP Plugins
WP Quellen

Javascript - Welle

Hier sehen Sie ein Javascript das eine Grafik als Welle darstellt. Ihr könnt eure eigenen Bilder in diese Welle einbauen. Bitte prüfen Sie ob das Script auf den Browsern funktioniert. Auf dem Internet Explorer müssten fast alle Javascripts funktionieren.

Bauen Sie diesen Code in den <head> </head> Bereich Ihrer Homepage ein.

<style type="text/css">
	#j1 {position:absolute; left:50; top:100; width:40; z-index:1}
	#a1 {position:absolute; left:90; top:100; width:40; z-index:2}
	#v1 {position:absolute; left:130; top:100; width:40; z-index:3}

	#a2 {position:absolute; left:170; top:100; width:40; z-index:4}
	#s1 {position:absolute; left:210; top:100; width:40; z-index:5}
	#c1 {position:absolute; left:250; top:100; width:40; z-index:6}
	#r1 {position:absolute; left:290; top:100; width:40; z-index:7}
	#i1 {position:absolute; left:330; top:100; width:40; z-index:8}
	#p1 {position:absolute; left:370; top:100; width:40; z-index:9}
</style>

Bauen Sie diesen Quellcode in den Body Tag ein:

<body onLoad="init()">

HTML Code für die Ausgabe der Welle:

<script language="JavaScript">

var isNav = false;
var isIE = false;

var obj;
var sinTab;
var pos = 0;
var schritte = 15;
var schrittweite = (2*Math.PI)/schritte;


function init() {

	// Mindestens Version 4.0
	if (parseInt(navigator.appVersion) >= 4) {
	
		
		if (navigator.appName.indexOf("Netscape") != -1) {
			isNav = true;
		} 
		if (navigator.appName.indexOf("Microsoft") != -1) {
			isIE = true;
		}
	}

	
	if (isNav || isIE) {
		sinTab = erzeugeSinTab();
		obj = erzeugeArray("j1", "a1", "v1", "a2", "s1", 
							"c1", "r1", "i1", "p1");
					
		setInterval("bewege()", 100);
	} else {
		alert("Sie benoetigen entweder den Netscape " +
			"Communicator 4.0\noder den Microsoft " +
			"Internet Explorer 4.0.");
	}
  
}


function erzeugeSinTab() {
	var tab = new Array();
	var posx = 0;
	for (i = 0; i <= schritte+8 ; i++) {
		tab[i] = Math.round(Math.sin(posx) * 50) + 100;
		posx += schrittweite;
	}
	
	return tab;
}


function erzeugeArray() {
	var objList = new Array();

	for (var i = 0; i < erzeugeArray.arguments.length; i++) {
		if (isNav) {
			objList[i] = document.layers[erzeugeArray.arguments[i]];
		} else {
			objList[i] = document.all[erzeugeArray.arguments[i]].style;
		}
	}
	
	return objList;
}


function bewege() {
	var num = 0;

	for (i in obj) {
		if (isNav) {
			obj[i].top = sinTab[pos+num];
		} else {
			obj[i].pixelTop = sinTab[pos+num];
		}
		num++;
	}

	pos++;
	if (pos >= schritte) pos = 0;
}

</script>
<div id="j1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="a1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="v1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="a2"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="s1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="c1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="r1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="i1"><img SRC="http://www.gif-bilder.de//sonstige/hotflames.gif" BORDER=0></div>

<div id="p1"><img src="http://www.gif-bilder.de/img/sonstige/hotflames.gif" BORDER=0></div>

zurück

Themen:

WP Themes

Programme

Webmaster

SEO Lexikon

Foto Download

Info - Tipp:

Analytics

Webdesign

ECommerce

Reisen

Treiber

Finanzen

Datenrettung

lizenzfreie Bilder

Seo

Filme

Sitemap

Impressum

Language: France

English

Italiano

Spain

Português

	Suchbegriff eingeben Suchformular senden Web www.gif-bilder.de