(Javascript) Bild vergrößern lassen...

Kangtar · 21.12.2008, 13:42

Moin,
Ich bin es mal wieder aber diesesmal mit einer Javascript frage,
Ich habe schon länger mal nach so einen script gesucht aber nix gefunden (ich zumindestens). Ich suche ein script was eine grafik von 10x10px langsam auf 800x800 vergrößert. Der vorgang sollte nur 10 sec dauern oder weniger, das soll den zweck haben das dabei der effekt entsteht das dass Bild auf einem Zukommt und sich vergrößert.
Evl kann mir da einer helfen der Javascript schon kann.
mfg Kangtar

Anzeige

Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!

Das_Es · 25.12.2008, 03:32

wenn die Frage noch steht

HTML-Code:

(...)
<script type="text/javascript">
var zeitcheck = 0;
var intervall = 30;
var aktiv = window.setInterval("BildSkalieren()", intervall);

function BildSkalieren() {	
	var schritt = (800 - 10) / ((10 * 1000) / intervall); // endgroesse - Anfangroessse / (10 Sek / Intervall | Anzahl der durchlaeufe) = um wieviel jedes mal erhöt werden muss
	var bild = document.getElementById("Bild");
	bild.width = bild.width + schritt;
	bild.height = bild.height + schritt;
	zeitcheck++;
	if(bild.width >=800 || bild.height >= 800 || zeitcheck >= 10 * 1000) // bricht sicherheitshalber ab wenn eines der Maße die 800 erreicht oder 10 sec um sind.
		window.clearInterval(aktiv);
	
}	

</script>
</head>

<body>
	<img src="http://www.oldskoolman.de/bilder/plog-content/images/bild-computer-pc/zeichen-symbole/die-erde.jpg" width="10" height="10" id="Bild" />
(...)

Aber die Bildgröße zu ändern sie meist nicht so gut aus.

noch als Anmerkung das mit dem einstellen des Intervall hat den Hintergrund das um so kleiner der Intervall um so geschmeidiger wird das Bild vergrößert aber um so öfters muss er das zeug rechnen und bearbeiten

Kangtar · 26.12.2008, 19:12

Danke für deine Antowrt,
was ist denn jetzt besser? Eine gif datei erstellt oder das mit java script machen bzw mit flash?
mfg Kangtar

Das_Es · 27.12.2008, 02:13

Wie ist das mit dem Gif erstellen gemeint?

zu Java bzw Flash.
Beides kann unter Umständen Deaktiviert sein beim Betrachter, desweiteren besteht die Möglichkeit das Flash auch erst geladen werden muss. heißt es dauert bei der Ausführung länger als Javascript. Anderseits kann es besser laufen und man kann es auch besser Tunen.

Kangtar · 27.12.2008, 14:56

Man kann ja auch so eine Gif animation erstellen, das er das Bild vergrößert und das er nur einmal durchläuft.
mfg Kangtar

Unregistriert · 18.02.2009, 17:38

habe eine frage:
(...)

Code:

<script type="text/javascript">
var zeitcheck = 0;
var intervall = 30;
var aktiv = window.setInterval("BildSkalieren()", intervall);

function BildSkalieren() {	
	var schritt = (800 - 10) / ((10 * 1000) / intervall); // endgroesse - Anfangroessse / (10 Sek / Intervall | Anzahl der durchlaeufe) = um wieviel jedes mal erhöt werden muss
	var bild = document.getElementById("Bild");
	bild.width = bild.width + schritt;
	bild.height = bild.height + schritt;
	zeitcheck++;
	if(bild.width >=800 || bild.height >= 800 || zeitcheck >= 10 * 1000) // bricht sicherheitshalber ab wenn eines der Maße die 800 erreicht oder 10 sec um sind.
		window.clearInterval(aktiv);
	
}	

</script>
</head>

<body>
	<img src="http://www.oldskoolman.de/bilder/plog-content/images/bild-computer-pc/zeichen-symbole/die-erde.jpg" width="10" height="10" id="Bild" />
<font size=1>10</font>

(...)

kann mann die "10" auch auf 800 gleichzeitig aufdrehen lassen?

Das_Es · 19.02.2009, 01:49

Ich verstehe die Frage leider nicht wirklich.

Unregistriert · 19.02.2009, 19:24

es gibt ein Chart bei mir, der zeigt wie viel ich Geld im Monat ausgebe, dieses Script vergrößert die Säule automatisch ,in diesem fall auf 800, das funktioniert perfekt, unter der säule ist ein Betrag (z.B.) 800 €
die Frage ist: wie kann man das Script einrichten, damit es auch mit dem Betrag genauso funktioniert? Also gleichzeitig mit dem Bild von, sagen wir 10 (oder besser von 0) auf 800€.

Das_Es · 20.02.2009, 00:24

Wenn ich das richtig Versanden habe ist gewünscht das neben den Bild, was ja größer wird noch ein Zahl in form eines Textes mit wächst.

Ich habe eine paar kleine Änderungen am Code noch allgemein vorgenommen, so dass das Zeitverhalten jetzt korrekt ist (es gab vorher ein paar Abweichungen wegen "Rundungsfehler")

Code:

<script type="text/javascript">
var zeitcheck = 0;
var intervall = 30;

var bildbreite = 10; // Variable fuer Korrete Berechnung
var bildhoehe = 10;
var zeahler = 0;


var aktiv = window.setInterval("BildSkalieren()", intervall);

function BildSkalieren() {    
    var schritt = (800 - 10) / (Math.ceil((10 * 1000) / intervall)); // endgroesse - Anfangroessse / (10 Sek / Intervall | Anzahl der durchlaeufe) = um wieviel jedes mal erhöt werden muss
    
    var schrittZaehler = 800 / (Math.ceil((10 * 1000) / intervall));
    
    var bild = document.getElementById("Bild");
    
    bildbreite = bildbreite + schritt;
    bildhoehe = bildhoehe + schritt;

    bild.width = Math.round(bildbreite);
    bild.height =  Math.round(bildhoehe);
    zeahler = zeahler + schrittZaehler;
    
    document.getElementById("counter").innerHTML = Math.round(zeahler) + "&euro;";
    zeitcheck++;
    if(bild.width >=800 || bild.height >= 800 || zeitcheck >= 10 * 1000) // bricht sicherheitshalber ab wenn eines der Maße die 800 erreicht oder 10 sec um sind.
        window.clearInterval(aktiv);
    
}    

</script>
</head>

<body>
    <img src="http://www.oldskoolman.de/bilder/plog-content/images/bild-computer-pc/zeichen-symbole/die-erde.jpg" width="10" height="10" id="Bild" />
<p><span id="counter" >0 &euro;</span></p>

Unregistriert · 20.02.2009, 17:59

ja, super, danke, das einzige , dass er die summe rundet, statt 174,89, gibt er 179, oder statt 0.30 macht 0.

Kangtar · 20.02.2009, 22:04

Nabend,
Ich habe nochmal eine modifikations frage für den script undzwar:
Unter dem Bild möchte ich ein Bereich haben (also eine div) dessen inhalt erst sichtbar werden soll wenn der script das Bild auf 800x800 vergrößert hat. Wie mach ich das?
mfg Kangtar

Das_Es · 21.02.2009, 02:12

für die 2 Nachkommastellen bei

Code:

document.getElementById("counter").innerHTML = Math.round(zeahler) + "&euro;";

das Math.round(zeahler) durch zeahler.toFixed(2) ersetzten

für das Sichtbar Werten den abschnitt

Code:

if(bild.width >=800 || bild.height >= 800 || zeitcheck >= 10 * 1000) 
        window.clearInterval(aktiv);

mit

Code:

if(bild.width >=800 || bild.height >= 800 || zeitcheck >= 10 * 1000) { 
        window.clearInterval(aktiv);
document.getElementById("unsichtbar").style.display = "";
}

erweitern

der Bereich der unsichtbar ist sieht so aus

Code:

<div id="unsichtbar" style="display:none" >...</div>

noch als anmerkung

statt display:none geht auch visibility:hidden
der Wesentliche unterschied liegt im Verhalten beim rest. bei Display nehmen andere Objekte keine rücksicht auf das Objekt. es ist so als wäre es nicht da, z.B. Ist dann ein weiteres Div darunter an seiner Stelle zu sehen. Bei visibility ist es nur unsichtbar, was heißt das z.b. ein andere sichtbares Elemte was direkt danach kommt nicht den Platz einimt.