rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: 
|
Verfasst Mi 27.06.2007 00:13
Titel
|
  |
|
| Zitat: | | Ich suche ein Script - habe schon im forum und über google gesucht - mit dem ich einen DIV per Knopfdruck nach Links bzw. Rechts bewegen kann. |
Das ist nicht allzu schwer.
| Zitat: | | Ich denke das man das mit einer Verbindung von Java Script und beim DIV mit nem overflow lösen kann. |
JavaScript ist klar. Aber wieso overflow, um ein Layer zu bewegen?
| Zitat: | | Die Rheinische Post teasert so ihre Bildergalerien an: |
Kann ich mir leider gerade nicht anschauen. Momentan komme ich nicht auf die Site...
| Zitat: | | Hat jemand nen Vorschlag oder am besten direkt nen Code wie ich meinen DIV Container bewegen kann? |
Ich hab dir ein kleines Beispielscript geschrieben.
Ist eine komplette HTML-Seite. Kopier mal den Code raus, speichere das als irgendwas.html ab und rufe die Datei auf.
Dort ist dann ein Layer zu sehen. Wenn du drauf klickst, bewegt es sich.
Ich denke, man kann das Prinzip recht gut erkennen.
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-language" content="de">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<meta name="author" content="rob">
<title>Layer wandert</title>
<style type="text/css">
#layer {
width: 200px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-color: red;
color: #000;
font-weight: bold;
cursor: pointer;
}
</style>
<script type="text/javascript">
var i = 10;
function wandern()
{
if ( document.all ) // für den alten MSIE
{
document.all.myLayer.style.left = i + "px";
document.all.myLayer.style.top = i + "px";
}
else if ( document.layers ) // für Netscape
{
document.myLayer.left = i + "px";
document.myLayer.top = i + "px";
}
else if ( document.getElementById ) // für moderne Browser
{
document.getElementById('myLayer').style.left = i + "px";
document.getElementById('myLayer').style.top = i + "px";
}
i = i + 10;
window.setTimeout( 'wandern()', 100 );
if ( i > ( screen.height - 180 ) )
{
i = 0;
}
}
</script>
</head>
<body>
<div id="myLayer" onclick="wandern();">Ich bin ein Layer. Klick mich und ich bewege mich.</div>
</body>
</html>
|
Noch ein paar Erklärungen, wenn du das Script ändern willst:
Das Script ist so programmiert, daß es eigentlich in jedem Browser laufen sollte.
Ich frage dafür nicht nach einem Browsernamen (der könnte falsch sein), sondern frage nach bestimmten Eigenschaften und arbeite damit, wenn diese vorhanden sind.
document.all ist nur dem alten MSIE bekannt, document.layers dem alten Netscape und die DOM-Methode document.getElementById ist den aktuellen Browsern bekannt.
Damit sollte das Script eigentlich überall funktionieren. Wenn dir die alten Browser egal sind, kannst du den Code natürlich kürzen. So ist es halt quasi dreifach programmiert.
Über top und left (im CSS-Code) positioniere ich das Layer. Das Layer bewege ich, indem ich diese Werte verändere.
Im Beispiel bewegt sich das Layer nach schräg unten. Den Pixelwert habe ich in der Variablen i gespeichert.
Wenn du das Script so ändern willst, so daß du die Bewegung besser steuern kannst, solltest du zwei Variablen (i und j) einsetzen. Dann kannst du die Angabe von top und left einzeln steuern. Jetzt nehme ich ja für beides immer den gleichen Wert.
Durch das i = i + 10; lege ich fest, daß das Layer immer in 10-Pixel-Schritten verschoben werden soll. Ist dieser Wert zu groß, "springt" das Layer anstatt einer flüssigen Bewegung.
Und damit sich das Layer halt immer weiter bewegt, wird die Funktion wandern() dann über window.setTimeout( 'wandern()', 100 ); alle Hundert Millisekunden aufgerufen.
Was noch? Ganz zum Schluß kommt noch eine if-Abfrage. Wenn das Layer dann über den Screen hinauswandern will, wird der Positionswert damit wieder auf 0 gesetzt.
Das funktioniert nur dann wirklich anständig, wenn man mit maximiertem Browserfenster arbeitet.
Wenn du sich Sache wirklich genau angehen willst, dann solltest du nicht mit den Screen-Maßen, sondern mit der Viewportgröße arbeiten.
Ich habe das der Einfachheithalber jetzt aber nicht getan.
Wenn du wissen willst, wie du das machst, dann schau hier.
Zuletzt bearbeitet von rob am Mi 27.06.2007 00:23, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
