Irgendwas horizontal oder vertikal in html bewegen lassen ?
Banana
- html
Hallo,
wer kann mir einen Link oder einen Code schreiben um eine Form oder ein Bild z.B. in eine html Datei zu bewegen
Horizontal oder vertikal (nach oben und wieder nach unten, oder von rechts nach links oder umgekehrt)
Die Bewegung möchte ich gerne ohne Ende. d.h. Ständig in Bewegung
Vielen Dank
mfg
Hallo
ja das finde ich schön aber so kompliziert natürlich nicht
Ich möchte eine einfache Bewegung orthogonal
hier habe ich ein code gefunden aber die Bewegung oist auch nicht Orthogonal :
http://forum.de.selfhtml.org/?t=172307&m=1128854
mfg
Liebe(r) Banana,
http://forum.de.selfhtml.org/?t=172307&m=1128854
dieser Thread ist geschlossen worden. Daher poste ich Deinen dortigen Code hierher. Danach schreibe ich noch ein paar Anmerkungen dazu.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>bild bewegen bewegung</title>
</head>
<body>
<div id="img" style="position:absolute;">
<img src="google.gif" onClick="pause_resume();" alt="دليل العرب الشامل">
</div>
<script language="JavaScript">
// Original: Justin Arruda (JArruda@mindspring.com)
// This script and many more are available free online at
// The JavaScript Source!! http://javascript.internet.com
//* Visit http://www.star28.com/ for more code
var xPos = 00; // 20
var yPos = document.body.clientHeight;
var step = 5; // 1
var delay = 30; // 30
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
</script>
</body>
</html>
Zum einen sollte das language-Attribut im <script>-Element durch das type-Attribut ersetzt werden, da dieser Code ewig alt ist und aktuelle Browser ganz dringend das type-Attribut brauchen:
<script type="text/javascript">
Zum anderen sollten Scripte heute generell so konstruiert oder geschrieben werden, dass man sie im <head> einer Seite einbaut, von wo sie sich dann nach dem Laden der Seite entsprechend selbst initialisieren. Am besten socgar so, dass der <http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=JavaScript-Code aus einer externen Datei eingebunden> wird.
Was mir sonst an dem Script nicht gefällt, sind die vielen globalen Variablen. Wenn Du einmal andere Script-Effekte mit diesem kombinieren willst, dann werden sich diese verschiedenen Scripte vielleicht gegenseitig stören, da sie gleichlautende Variablennamen benutzen, oder gar identische Objekte des Browsers sich gegenseitig wegreissen.
Ich habe auch einmal mit solchen JavaScript-Spielereien experimentiert, um für einen Grußkartenservice visuelle Effekte bereitstellen zu können. Das Ergebnis kannst Du auf dieser Seite testen (Vorsicht! Die Seite könnte den Browser etwas in die Knie zwingen).
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo,
vielen Dank für diese Informationen
mfg
Bitte bleib in Deinem Thread, danke.
Doppelpostings sind hier unerwünscht.
mfg Thomas
Entschuldigung, ich habe am falschen Ort gemeckert.
Das hier ist ja der erste Thread, in dem man Dir schon
geantwortet hat, und er sollte nicht gelöscht werden.
(Der spätere, zu löschende Therad ist der da.)
mfg Thomas
Hallo Banana,
Es geht zur Not auch ganz simpel mit sowas. Nur ist dieser Tag depp, depp, deppricated [1] - so soder so ähnlich ;-)
Grüsse gary
[1] depreciated = in ungnade gefallen (wird in Zukunft wohl nicht mehr unterstützt bzw. gilt als veraltet)
Hallo
vielen Dank! Das konnte ausreichen ;)
mfg
Hallo Banana,
vielen Dank! Das konnte ausreichen ;)
Es gibt auch noch die Möglichkeit folgende Werte zu ändern:
<marquee direction="right" scrollamount="20" scrolldelay="5">
<b>Dieser Text scrollt nach rechts</b>
</marquee>
<marquee direction="left" scrollamount="20" scrolldelay="-5">
<b>Dieser Text scrollt nach links</b>
</marquee>
Mit direction bestimmst du die Scrollrichtung
Mit scrollamount die Anzahl Bildpunkte, um die je Vorgang gescrollt wird.
Mit delay die Zeitverzögerung beim Scrollen.
Infos dazu findest du hier. Um das ganze jedoch valide zu bekommen, wirst du dir was mit Javascript bauen müssen. (Flash oder Java geht natürlich auch) Oder wieder simpel: Ein riesen Gif, hehe.
Viele Grüsse und Erfolg beim Basteln Gary