Bouncing-Image(2)

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Bouncing-Image(2)

Beitrag von Hape »

CSS-Anweisungen in den Header:

Code: Alles auswählen

<style>
<!--
div.bound {display:block; border-style:solid;
width : document.body.clientWidth;height:document.body.clientHeight; border-width:0px}
div.move { position:absolute; }
-->
</style>
Ebenfalls das Script in den Header kopieren:

Code: Alles auswählen

<script language="javascript">
var x = 5; //Starting x coord.
var y = 5; //Starting y coord.
var max_x = 1200; //maximum x coord.
var max_y = 800; //maximum y coord.
var xoffset = 10; //Move 10px every step
var yoffset = 10; //Move 10px every step
function go()
{
moveLogo()
}
function moveLogo() {
x = x + xoffset;
y = y + yoffset;
//Move the image to the new location
document.getElementById("msucs").style.top = y+'px';
document.getElementById("msucs").style.left = x+'px';
//if reach boundaries, reset offset vectors
if ((x+xoffset > max_x) || (x+xoffset < 0))
xoffset *=-1;
if ((y+yoffset > max_y) || (y+yoffset < 0))
yoffset *=-1;
window.setTimeout('moveLogo()',100);
//call moveLogo every 100 ms
}
</script>
Zuguterletzt noch dieses in den Body kopieren:

Code: Alles auswählen

<div class="bound">
<div id="msucs" class="move">
<img src="p44.png" alt="need image here" />
</div>
</div>
Demoseite hier: Bouncing-Image-2
p44.png
p44.png (2.31 KiB) 4368 mal betrachtet

Antworten