buscodescargas.com » JavaScript » Texto que se Desplaza por la Pagina

Con un simple código que agreguemos, como el siguiente, podeos conseguir tener un texto desplazándose a través de la página de nuestros sitios web para dar la bienvenida a las visitas, o para notificarles alguna novedad en la misma página.

<!– MENSAJE QUE SE DESPLAZA POR LA PÁGINA –>
 
<html>
<head>
<style type="text/css">
 
#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
 
}
 
</style>
</head>
 
<body>
 
<script language="JavaScript1.2">
 

 
// Mensaje
var thecontent='<h2><font color="red">buscodescargas.com;lo que te conviene,lo tiene</font></h2>'
// Tiempo de animación en milisegundos ('' = infinito)
var hidetimer=7000;
// Velocidad
var BallSpeed = 8;
 

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>
 
</body>
</html>

josep campanales

Ah!...aceptamos invitación a café...!!

Comparte con tus amigos...
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Add to favorites
  • Bitacoras.com
  • Live
  • Meneame
  • MSN Reporter
  • PDF
  • Ping.fm
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • email
  • Print
  • LinkedIn
  • Posterous
  • Twitter



También te puede interesar...

Tags: , ,

Un comentario en “Texto que se Desplaza por la Pagina”

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Con un simple código que agreguemos, como el siguiente, podeos conseguir tener un texto desplazándose a través de la página de nuestros sitios web para dar la bienvenida a las visitas, o para notificarles alguna novedad e……

estaremos agradecidos con tus comentarios