daily pastebin goal
61%
SHARE
TWEET

Bewegliches HTML

RandomGuy32 Feb 11th, 2014 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <title>
  4.         Test: Bewegliches HTML
  5. </title>
  6. <meta name="author" content="Eiffel" />
  7. <script type="text/javascript">
  8.                 var moveAmountVertical;
  9.                 var moveAmountHorizontal;
  10.                
  11.         function init() {
  12.                 moving = document.getElementById("moving");
  13.                 moving.style.position = "absolute";
  14.                 moving.style.top = 50 + "px";
  15.                 moving.style.left = 50 + "px";
  16.                 moving.style.color = "#ff0000";
  17.                 moving.style.backgroundColor = "#0000ff";
  18.                 moving.style.fontWeight = "bold";
  19.                 moveDirection = "forward";
  20.                 }
  21.                
  22.         function changeColour() {
  23.                 moving.style.color = "#0000ff";
  24.                 moving.style.backgroundColor = "#ff0000";
  25.                 window.setTimeout("changeColour2()", 100);
  26.                 }
  27.  
  28.         function changeColour2() {
  29.                 moving.style.color = "#ff0000";
  30.                 moving.style.backgroundColor = "#0000ff";
  31.                 window.setTimeout("changeColour()", 100);
  32.                 }
  33.                
  34.         function move() {
  35.                 // An Wendepunkten Richtung umschalten
  36.                 if ((moving.style.left == "50px") && (moving.style.top == "50px")) {
  37.                         moveDirection = "forward";
  38.                         moveAmountVertical = 1;
  39.                         moveAmountHorizontal = 1;
  40.                         }
  41.                 if ((moving.style.left == "500px") && (moving.style.top == "300px")) {
  42.                         moveDirection = "backward";
  43.                         moveAmountVertical = 1;
  44.                         moveAmountHorizontal = 1;
  45.                         }
  46.                 // Bewegungsrichtung vorwärts
  47.                 if (moveDirection == "forward") {
  48.                         // horizontale Bewegung bis zum Punkt left=500px
  49.                         if (moving.style.left != "500px") {
  50.                                 // neue Position festlegen
  51.                                 moving.style.left = 50 + parseInt(moveAmountHorizontal) + "px";
  52.                                 // moveAmountHorizontal um 1 erhöhen
  53.                                 moveAmountHorizontal++;
  54.                                 }
  55.                         // vertikale Bewegung bis zum Punkt top=300px
  56.                         else if (moving.style.top != "300px") {
  57.                                 // neue Position festlegen
  58.                                 moving.style.top = 50 + parseInt(moveAmountVertical) + "px";
  59.                                 // moveAmountVertical um 1 erhöhen
  60.                                 moveAmountVertical++;
  61.                                 }
  62.                         }
  63.                 // Bewegungsrichtung rückwärts
  64.                 if (moveDirection == "backward") {
  65.                         // vertikale Bewegung bis zum Punkt top=50px
  66.                         if (moving.style.top != "50px") {
  67.                                 // neue Position festlegen
  68.                                 moving.style.top = 300 - parseInt(moveAmountVertical) + "px";
  69.                                 // moveAmountVertical um 1 verringern
  70.                                 moveAmountVertical++;
  71.                                 }
  72.                         // horizontale Bewegung bis zum Punkt left=50px
  73.                         else if (moving.style.left != "50px") {
  74.                                 // neue Position festlegen
  75.                                 moving.style.left = 500 - parseInt(moveAmountHorizontal) + "px";
  76.                                 // moveAmountHorizontal um 1 verringern
  77.                                 moveAmountHorizontal++;
  78.                                 }
  79.                         }
  80.                 // alle 10 Millisekunden wiederholen
  81.                 window.setTimeout("move()", 10);
  82.                 }
  83. </script>
  84. </head>
  85. <body onLoad="init()">
  86. <p id="moving">Test</p>
  87. <input id="btnColor" type="button" value="Farbe" onClick="changeColour()" />
  88. <input id="btnMove" type="button" value="Bewegen" onClick="move()" />
  89. <noscript>
  90.         Bitte JavaScript einschalten
  91. </noscript>
  92. </body>
  93. </html>
RAW Paste Data
Top