JavaScript bild bewegen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abfrage
all
bewegen
bewegung
bild
browser
code
denken
dokument
eigenschaft
element
ermitteln
folgende reihenfolge
funktion
konkrete eigenschaft
maus
position
realisieren
testen
verkleinern
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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. -
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. -
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
zu realisieren.setTimeout(funktion, zeit) -
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
-
Vielen Dank :) werde ich gleich mal ausprobieren
-
die position ist viel einfacher zu ermitteln, abgesehen davon das man nicht auf Browser testen soll, sondern auf die konkrete Eigenschaft:
das ist zumindest syntaktisch besser.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); } -
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?
-
Ich würde bei jQuery (http://jquery.org) suchen - ich denke das kann das. Habe ich leider selbst aber noch nicht gebraucht.
lg
hei -
simuliertes schrieb:
Ja hiermit getan, nein ehrlich document.all ist eine reine IE-abfrage, da kann man genausogut schreiben:
Kannst Du Dir mal bitte folgende Reihenfolge angewöhnen? :
Erst lesen, dann denken, dann schreiben!
Wo wurde hier auf Browser getestet?
einfacher?
da kommt das selbe raus.isIE = /*@cc_on!@*/false;
Abgesehen davon wollte ich eigentlich nur einen Anstoß dafür liefern, sich ein Schema zu merken, das etwa so aussieht:
Einfacher ist das vieleicht nicht immer, aber es funktioniert sicher und man vergisst nicht so schnell ein paar Kleinigkeiten,/* * 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; }
wie du z.B. oder was soll das:
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.xpos = (document.all) ? window.event.x: e.pageX;
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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
