kostenloser Webspace werbefrei: lima-city


JavaScript bild bewegen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    f8vs

    f8vs hat kostenlosen Webspace.

    Hallo,
    ich will machen das wenn ich mit der Maus irgendwo im Browser
    hinklicke, ein Bild sich genau zu diese Stelle langsam bewegt,
    ist das möglich?

    mfg Simon

    Beitrag zuletzt geändert: 9.9.2010 9:30:04 von f8vs
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Da würde ich mir mal Frameworks wie jQuery oder ähnliche anschaun und googlen, ob die sowas können. Ich hätte jetzt keine Idee, wie man das realisieren könnte. Möglich sein könnte es aber.

    Beitrag zuletzt geändert: 9.9.2010 10:15:06 von vertico
  4. Das Bild am besten mit
    position: relative;

    in CSS versehen. In Javascript die Position der Maus herausfinden und dann bei dem Bild die Left und Top Eigenschaften von solange vergrößern bzw. verkleinern bis left und top größer bzw. kleiner sind als die Position auf die geklickt wurde.
  5. Das Bild am besten mit

    position: relative;


    in CSS versehen. In Javascript die Position der Maus herausfinden und dann bei dem Bild die Left und Top Eigenschaften von solange vergrößern bzw. verkleinern bis left und top größer bzw. kleiner sind als die Position auf die geklickt wurde.


    Und wie realisierst du das "langsam", das der Threadersteller wünscht? Das man wohinklickt und das Bild *blopp* da ist ist einfach, doch es langsam zu bewegen, dazu vermutlich relativ flüssig in der Bewegung, ist schon schwieriger.
  6. vertico schrieb:
    Das Bild am besten mit

    position: relative;


    in CSS versehen. In Javascript die Position der Maus herausfinden und dann bei dem Bild die Left und Top Eigenschaften von solange vergrößern bzw. verkleinern bis left und top größer bzw. kleiner sind als die Position auf die geklickt wurde.


    Und wie realisierst du das "langsam", das der Threadersteller wünscht? Das man wohinklickt und das Bild *blopp* da ist ist einfach, doch es langsam zu bewegen, dazu vermutlich relativ flüssig in der Bewegung, ist schon schwieriger.

    Das geht ist z.B. mit einem
    setTimeout(funktion, zeit)
    zu realisieren.
  7. Autor dieses Themas

    f8vs

    f8vs hat kostenlosen Webspace.

    Und wie finde ich die Position der Maus herraus?

    mfg Simon
  8. f8vs schrieb:
    Und wie finde ich die Position der Maus herraus?

    mfg Simon

    document.onmousemove = getMousePos;
    function getMousePos(e) {
       xpos = (document.all) ? window.event.x: e.pageX;
       ypos = (document.all) ? window.event.y: e.pageY;
    }


    einfach in den header setzen, xpoy/ypos sind dann die mauskoordinaten
  9. Autor dieses Themas

    f8vs

    f8vs hat kostenlosen Webspace.

    Vielen Dank :) werde ich gleich mal ausprobieren
  10. die position ist viel einfacher zu ermitteln, abgesehen davon das man nicht auf Browser testen soll, sondern auf die konkrete Eigenschaft:
    document.onmousemove = getMousePos;
    function getMousePos(e) {
      e = e || window.event;
      var ieScroll = document.documentElement || document.body;
      var xpos = e.pageX || (e.clientX + ieScroll.scrollLeft);
      var ypos = e.pageY || (e.clientY + ieScroll.scrollTop);
    }
    das ist zumindest syntaktisch besser.
  11. nemoinho schrieb:
    die position ist viel einfacher zu ermitteln, abgesehen davon das man nicht auf Browser testen soll, sondern auf die konkrete Eigenschaft:

    Sorry das muss jetzt mal sein:
    Kannst Du Dir mal bitte folgende Reihenfolge angewöhnen? :
    Erst lesen, dann denken, dann schreiben!
    Wo wurde hier auf Browser getestet?
    einfacher?

  12. Ich würde bei jQuery (http://jquery.org) suchen - ich denke das kann das. Habe ich leider selbst aber noch nicht gebraucht.

    lg
    hei
  13. simuliertes schrieb:
    Kannst Du Dir mal bitte folgende Reihenfolge angewöhnen? :
    Erst lesen, dann denken, dann schreiben!
    Wo wurde hier auf Browser getestet?
    einfacher?
    Ja hiermit getan, nein ehrlich document.all ist eine reine IE-abfrage, da kann man genausogut schreiben:
    isIE = /*@cc_on!@*/false;
    da kommt das selbe raus.
    Abgesehen davon wollte ich eigentlich nur einen Anstoß dafür liefern, sich ein Schema zu merken, das etwa so aussieht:
    /*
     * eine Event-funktion hat erstmal folgenden Aufbau
     * und kann später immernoch verändert werden
     */
    var xyz = function(e){
      // falls der Browser (eigentlich nur der IE) kein e überträgt, dann
      // kann man auf die MS-Version window.event ausweichen
      e = e || window.event;
      // so nun speichern wir noch fluks das auslösende HTML-Element
      // wieder in der normalen Version und der MS-Variante
      var obj = e.target || e.srcElement;
    }
    Einfacher ist das vieleicht nicht immer, aber es funktioniert sicher und man vergisst nicht so schnell ein paar Kleinigkeiten,
    wie du z.B. oder was soll das:
    xpos = (document.all) ? window.event.x: e.pageX;
    x ist die Position bezogen auf das Eltern Element, während pageX die Position bezogen auf das Dokument ist, ich habe das lediglich angeglichen, denn clientX + scrollLeft ist ebenfalls auf das Dokument bezogen und die abfrage nach ieScroll habe ich eingefügt, da ich nicht weiß ob @f8vs Seite den IE in den Quirksmodus schickt, ansonsten wäre das natürlich kürzer.

    Es tut mir leid, ich halte es für eine der Grundregeln des guten Programmierens Plattformunabhängig zu schreiben. In JS geht das Teilweise leider nur wenn man auf die verlangte Eigenschaft testet. Darum vermeide ich eine Abfrage wie document.all, den das interpretieren manche Browser noch als Relikt ohne das sie dann den Rest verstehen... oder ähnliches.
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!