tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
263
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 02.11.11 08:05 #1
    Isarstyle Isarstyle ist offline Grünschnabel
    Registriert seit
    Nov 2011
    Beiträge
    3
    Hallo,

    nachdem ich mir heute die Nacht um die Ohren geschlagen habe, aber zu keiner Lösung gekommen bin wollte ich einfach mal fragen ob hier vielleicht jemand eine Idee hat wie man mein Ziel umsetzen kann.

    Ich stelle mir einen Scrollbalken vor, der von links über unten nach rechts wandert je nach position der maus. Ich habe das ganze schon mal mit einem testdiv erstellt anbei der code.

    die ganze Bewegung sollte sich Kreisförmig vollziehen, daher die Berechnung des Abstandes vom Mittelpunkt. Wäre allerdings auch nicht so schlimm, wenn der balken nur am Rand bleiben würde.



    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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
</head>
<body>
<script type="text/javascript">
   $(document).ready(function(){   
       $(document).mousemove(function(e){
    var mitteX = 0;
    var mitteY = 0;
    var abstandquad = 0;
    var abstandmitte = 0;
    var speed = 0;
    var distX = 0;
    var distY = 0;
    var distabsquad = 0;
    var distabs = 0;
    var kugelX = 0;
    var kugelY = 0;
    var kugel = $("div.#kugel");
    var position = kugel.position();
    var kugelposX = 0;
    var kugelposY = 0;
    var kugelinecke = 0;
    
    kugelY = (position.top);
    kugelX = (position.left);
      mitteX = $(window).width() / "2";
       mitteY = $(window).height() / "2";
      
/*    abstandquad = (e.pageX - mitteX)*(e.pageX - mitteX) + (e.pageY-mitteY)*(e.pageY-mitteY);
      
      abstandmitte =  Math.sqrt(abstandquad);
        
        if (e.pageY > kugelY) {
            distY = e.pageY - kugelY;
            
        } else {
            
            distY = kugelY - e.pageY;
        }
        
        if (e.pageX > kugelX) {
            distX = e.pageX - kugelX;
            
        } else {
            
            distX = kugelX - e.pageX;
        }
            
       distabsquad = (e.pageX - distX)*(e.pageX - distX) + (e.pageY-distY)*(e.pageY-distY);
       
       distabs = Math.sqrt(distabsquad);*/
       
       kugelinecke = mitteX / 2;
       $('#status').html(e.pageX +', '+ kugelinecke);
       /*Falls Maus am rechten rand*/
       if ((kugelinecke * "3") < e.pageX){
           /*Falls kugel am unteren Rand*/
             if (kugelY == "90%") {
               $("div.#kugel").stop().animate({left:"90%"},500,"easeOutExpo");
                $("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
            }else {
                $("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
            }
                
                
       }else{
           /*Falls Maus am linken rand*/
               if (kugelinecke > e.pageX && e.pageX < mitteX) {
                   /*Falls kugel am unteren Rand*/
                    if (kugelY == "90%") {
                     $("div.#kugel").stop().animate({left:"10%"},500,"easeOutExpo");
                     $("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
                  
                    }else {
                     $("div.#kugel").stop().animate({top:"e.pageY"},2000,"easeOutExpo");
                     }
               }else{
                   $("div.#kugel").stop().animate({left:"e.pageX"},1000,"easeOutExpo");
               }
               
         $("div.#kugel").stop().animate({top:"e.pageY",left:"e.pageX"},2000,"easeOutExpo");
        }
       
     
       
          });  
   
 
});



    Vielen Dank fürs anschauen,

    Viele Grüße
    Geändert von Isarstyle (02.11.11 um 08:11 Uhr)
     
    Zitieren Zitieren
  2. 02.11.11 10:17 #2
    Avatar von chmee
    chmee chmee ist gerade online mod | media
    tutorials.de Moderator
    Registriert seit
    Apr 2004
    Ort
    Berlin bei Potsdam
    Beiträge
    7.630
    Blog-Einträge
    4
    Stelle es doch bitte als fiddle bereit, dann lässt sich am lebenden Objekt erklären und nachbessern.
    http://jsfiddle.net/

    mfg chmee
     
    Mein Blog - VideoFAQ - FotoFAQ - bei Flickr - DSLR Kleinanzeigen
    Benutzt den DANKE-Knopf oder bewertet den Beitrag

    "GEHT NICHT" HILFT NICHT, TESTET EURE CODES ONLINE UND GEBT KLARE INFOS!
    -> Regexp <- -> php <- -> Javascript <-
    Zitieren Zitieren
  3. 02.11.11 14:58 #3
    Isarstyle Isarstyle ist offline Grünschnabel
    Registriert seit
    Nov 2011
    Beiträge
    3
    Ok ich habe das ganze ins jsfiddle gepackt.


    http://jsfiddle.net/S56S5/

    Viele Grüße
     
    Zitieren Zitieren
  4. 04.11.11 10:30 #4
    Isarstyle Isarstyle ist offline Grünschnabel
    Registriert seit
    Nov 2011
    Beiträge
    3
    Ich wollte mal fragen ob schon jemand eine Lösung gefunden hat.

    ich denke das Problem liegt bei meiner Schleifenkonstruktion, ich weiß aber leider nicht wo.

    mfg Isarstyle
     
    Zitieren Zitieren
« Javascript und Canvas | Mit Buttonclick mehrere Textfelder ändern »

Ähnliche Themen

  1. JQuery Queuing-Problem beim Hovermenü und & ajax/Jquery Animation
    Von Socimy im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 05.08.11, 07:33
  2. Scrollbar parallel zu zweiter Scrollbar bewegen
    Von Maddili im Forum Java
    Antworten: 3
    Letzter Beitrag: 17.12.10, 10:47
  3. Scrollbar Problem in SWT
    Von Sanagarth im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 06.11.07, 12:38
  4. Scrollbar erzwingen, Firefox macht noch eine vertikale Scrollbar dazu...
    Von aTa im Forum HTML & XHTML
    Antworten: 16
    Letzter Beitrag: 23.12.04, 15:37
  5. scrollbar problem...
    Von creutzfeld im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 13.10.01, 22:47

Stichworte