tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
376
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.01.08 17:09 #1
    Hansii1234 Hansii1234 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    51
    Hey ihr!

    Hab mal ne Frage...
    Ich hab mir heut schnell ein kleines Script geschrieben, welches zwei Bilder (das eine links zur hälfte und das andere rechts zur hälfte) direkt nebeneinander anzeigt.
    Sobalt man mit der Maus auf dem einen geht, fährt bei diesem dann die fehlente Hälfte über dem daneben liegenden. Soweit so gut, geht auch... Zumindest wenn man anständig auf das Bild geht.
    Sobalt man aber schnell mit dem Mausezeiger drüber fährt oder schnell rein und wieder raus oder ähnliches, fängt es das spinnen an... ich hab schon verschiedene sachen ausprobiert, es hat aber bis jetzt nichts geholfen! Wär echt cool, sofern mir jemand von euch helfen kann!

    Schonmal Danke im Vorraus!


    Hier der Code:

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <script>
  var zIndex=0;
  var counter_in=0;
  var counter_out=0;  
  var width_in=0;
  var left_in=0;
  var margin_in=0;
  var width_out=0;
  var left_out=0;
  var margin_out=0;
  var loadet=0;
  var unloaded=0;
  
  
  function change_in(id_in){
  if (loadet==0){
  loadet=1;
  window.setTimeout('size_max('+id_in+')', 1);}
  }
  
  function size_max(id_in){
      counter_in++;
      if(counter_in==1){
      zIndex++;
      width_in=50;
      left_in=150;
      margin_in=-50;
      }

      width_in=width_in+2;
      document.getElementById('div_bild'+id_in).style.zIndex=zIndex;
      document.getElementById('div_bild'+id_in).style.width=width_in;
      
      if(id_in==2){
      left_in=left_in-2;
      margin_in=margin_in+2;
      document.getElementById('div_bild'+id_in).style.left=left_in;
      document.getElementById('bild'+id_in).style.marginLeft=margin_in;
      }
      
      if(width_in<100){
      window.setTimeout('size_max('+id_in+')', 1);}
      else{counter_in=0;loadet=0;}
      
      }
      
      
    function change_out(id_out){
    if(unloaded==0){
    uloaded=1;
    window.setTimeout('size_min('+id_out+')', 1);}
    }
  
    function size_min(id_out){
      
      counter_out++;
      counter_in=0;
      
      if(counter_out==1){
      width_out=width_in;
      left_out=left_in;
      margin_out=margin_in;}
      
      width_out=width_out-2;
      
      document.getElementById('div_bild'+id_out).style.width=width_out;
      
      if(id_out==2){
      left_out=left_out+2;
      margin_out=margin_out-2;
      document.getElementById('div_bild'+id_out).style.left=left_out;
      document.getElementById('bild'+id_out).style.marginLeft=margin_out;
      }
      
      if(width_out>50){
      window.setTimeout('size_min('+id_out+')', 1);}
      else{
      counter_out=0;
      uloaded=0;
      }
      }
      
    function show(id){
      
      }
  </script>
<div id="neuneu">
<div id="div_bild1" onmouseover="change_in(1);" onmouseout="change_out(1);" style="left:100px;position:absolute;overflow:hidden;width:50px;"><img src="bild1.jpg" onclick="show(1);" id="bild1" style="width:100px;height:75px;border:1px solid #000055;"></div>
<div id="div_bild2" onmouseover="change_in(2);" onmouseout="change_out(2);" style="left:150px;position:absolute;overflow:hidden;width:50px;"><img src="bild2.jpg" onclick="show(2);" id="bild2" style="margin-left:-50px;width:100px;height:75px;border:1px solid #000055;"></div>
</div>
  </body>
</html>
    Gruß!

    Achja... sorry wegen den fehlenten Kommentaren... hab ich schnell schnell gemacht...
    Geändert von Hansii1234 (16.01.08 um 17:11 Uhr)
     
    Zitieren Zitieren
  2. 17.01.08 07:47 #2
    FipsTheThief FipsTheThief ist offline Mitglied Platin
    Registriert seit
    Oct 2004
    Ort
    Leipzig
    Beiträge
    589
    Das Problem liegt an deinen globalen Variablen also margin_out , left_out etc.

    Angenommen Du scrollst über die Linke seite dann fängt das Timeout an margin_out zu verändern , nun ganz flott über die rechte seite , margin_out wird überschrieben und der linke Teil welcher noch nicht ganz fertig ist mit seiner Aktion nimmt nun den neuen Wert von margin_out,left_out etc und somit flippt es aus.

    Da musst dann schon anfangen zu kapseln zum Beispiel eigene Klasse in JavaScript wo für jedes Bild genau eine Instanz existiert die dann die Funktionalität übernimmt.
     
    Zitieren Zitieren
  3. 18.01.08 13:45 #3
    Hansii1234 Hansii1234 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    51
    Hmmm...
    Habs jetzt mir Arrays gemacht (für jedes Bild eines), nur des Resultat ist das selbe...

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

      <script>
  Bild1 = new Array(); 
  Bild2 = new Array();
  var counter_in=0;
  var counter_out=0;
  var zIndex=0;
  
  function bigger(id){
      counter_in++;
      if(counter_in==1){
      zIndex++;
      window["Bild"+id]["width_in"]=50;
      window["Bild"+id]["left_in"]=150;
      window["Bild"+id]["margin_in"]=-50;}
      
 
      window["Bild"+id]["width_in"]=window["Bild"+id]["width_in"]+2;
      document.getElementById('div_bild'+id).style.zIndex=zIndex;
      document.getElementById('div_bild'+id).style.width=window["Bild"+id]["width_in"];
      
      if(id==2){
      window["Bild"+id]["left_in"]=window["Bild"+id]["left_in"]-2;
      window["Bild"+id]["margin_in"]=window["Bild"+id]["margin_in"]+2;
      document.getElementById('div_bild'+id).style.left=window["Bild"+id]["left_in"];
      document.getElementById('bild'+id).style.marginLeft=window["Bild"+id]["margin_in"];
      }
      
      if(window["Bild"+id]["width_in"]<100){
      window.setTimeout('bigger('+id+')', 1);}
      else{counter_in=0;} 
      }
      
 
    function out(id){
      
      counter_out++;
      counter_in=0;
      
      if(counter_out==1){
      window["Bild"+id]["width_out"]=window["Bild"+id]["width_in"];
      window["Bild"+id]["left_out"]=window["Bild"+id]["left_in"];
      window["Bild"+id]["margin_out"]=window["Bild"+id]["margin_in"];}
      
      window["Bild"+id]["width_out"]=window["Bild"+id]["width_out"]-2;
      
      document.getElementById('div_bild'+id).style.width=window["Bild"+id]["width_out"];
      
      if(id==2){
      window["Bild"+id]["left_out"]=window["Bild"+id]["left_out"]+2;
      window["Bild"+id]["margin_out"]=window["Bild"+id]["margin_out"]-2;
      document.getElementById('div_bild'+id).style.left=window["Bild"+id]["left_out"];
      document.getElementById('bild'+id).style.marginLeft=window["Bild"+id]["margin_out"];
      }
      
      if(window["Bild"+id]["width_out"]>50){
      window.setTimeout('out('+id+')', 1);}
      else{
      counter_out=0;}
      }
     
    Zitieren Zitieren
  4. 18.01.08 15:22 #4
    Hansii1234 Hansii1234 ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    51
    Ich glaube das liegt nicht an dem, dass die Daten übernommen werden
    (hab ja auch bei V.1 deshalb extra die loaded und unloaded variable, welche das aufziehen eines bildes erst erlaubt, sofern das andere fertig ist...) da ich nochmals extra nur für Bild1 zwei eigene Funktionen die das Hin- und Herswitchen managen geschrieben aber sobalt man schnell rein und raus geht, spinnt es wieder...

    Gibt es denn noch eine andere Funktion für sowas um 'langsame' Schleifen bzw. Wiederholungen zu durchführen anstatt von "window.setTimeout('out...', XXX);"?

    Oder kann man While-Schleifen irgendwie verlangsamen?

    Gruß!
     
    Zitieren Zitieren
« Speicherordner bzw. Dateipfad ermitteln | jquery drag containment Problem »

Ähnliche Themen

  1. Monitorsignal switchen/splitten
    Von Lil-rich im Forum Hardware
    Antworten: 6
    Letzter Beitrag: 20.07.08, 19:00
  2. Bild bei mouseover switchen
    Von Tix im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 09.07.06, 16:40
  3. Portverwaltung/Drosselung an Switchen
    Von Pfefferzahn im Forum Netzwerke
    Antworten: 3
    Letzter Beitrag: 08.06.06, 13:52
  4. 2 objektelemente switchen
    Von Nagual im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 30.03.05, 13:29
  5. bilder switchen
    Von melli im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 02.11.03, 23:00