Tutoriales de Javascript

Mensaje animado en java
Introducción

Es un script que muestra un texto en toda la página rebotando como pelota de un lado para otro. Copea el código y colócalo en tu página para que sea mas dinámica.

Paso 1

Copea el estilo que va a tener el texto dentro de la cabecera head.



<style type="text/css">
#supertext {
    position:absolute;
    left:0;
    top:0;
    visibility:hide;
    visibility:hidden;
}
</style>


Paso 2

Ahora copea el script dentro de body para que funcione el mensaje.



<script language="Javascript1.2">

// script Original: Lloyd Hassells

// Mensaje
var thecontent=<h2><font color="#0000FF">Depósito de Javascripts!</font></h2>
// Tiempo de animación en milisegundos ( = infinito)
var hidetimer=7000;
// Velocidad
var BallSpeed = 10;


var contentWidth;
var contentHeight;
var maxBallSpeed = 50;


var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = right;
var yDir = down;
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
   if (document.all) {
      xMax = document.body.clientWidth
      yMax = document.body.clientHeight
      document.all("supertext").style.visibility = "visible";
      contentWidth=supertext.offsetWidth
      contentHeight=supertext.offsetHeight
      }
   else if (document.layers) {
      xMax = window.innerWidth;
      yMax = window.innerHeight;
      contentWidth=document.supertext.document.width
      contentHeight=document.supertext.document.height
      document.layers["supertext"].visibility = "show";
      }
   setTimeout(moveBall(),400);
   if (hidetimer!=)
   setTimeout("hidetext()",hidetimer)
   }

function moveBall() {
   if (superballRunning == true) {
      calculatePosition();
      if (document.all) {
         document.all("supertext").style.left = xPos + 
document.body.scrollLeft;
         document.all("supertext").style.top = yPos + 
document.body.scrollTop;
         }
      else if (document.layers) {
         document.layers["supertext"].left = xPos + 
pageXOffset;
         document.layers["supertext"].top = yPos + pageYOffset;
         }
      animatetext=setTimeout(moveBall(),20);
      }
   }

function calculatePosition() {
   if (xDir == "right") {
      if (xPos > (xMax - contentWidth - BallSpeed)) { 
         xDir = "left";
         }
      }
   else if (xDir == "left") {
      if (xPos < (0 + BallSpeed)) {
         xDir = "right";
         }
      }
   if (yDir == "down") {
      if (yPos > (yMax - contentHeight - BallSpeed)) {
         yDir = "up";
         }
      }
   else if (yDir == "up") {
      if (yPos < (0 + BallSpeed)) {
         yDir = "down";
         }
      }
   if (xDir == "right") {
      xPos = xPos + BallSpeed;
      }
   else if (xDir == "left") {
      xPos = xPos - BallSpeed;
      }
   else {
      xPos = xPos;
      }
   if (yDir == "down") {
      yPos = yPos + BallSpeed;
      }
   else if (yDir == "up") {
      yPos = yPos - BallSpeed;
      }
   else {
      yPos = yPos;
      }
   }

function hidetext(){
if (document.all)
  supertext.style.visibility="hidden"
  else if (document.layers)
  document.supertext.visibility="hide"
  clearTimeout(animatetext)
}

if (document.all||document.layers){
  document.write(<span id="supertext"><nobr>+thecontent+
</nobr></span>)
  window.onload = initializeBall;
  window.onresize = new function("window.location.reload()");
}
</script>


Autor: Lloyd Hassell DescargarDescargar

Comentarios en "Mensaje animado en java"

Table 'programa_programas.t_comentarios' doesn't exist