Categorías: Tutoriales

Crear mensajes flotantes

  • Haz que tus mensajes floten sobre la página como globos.
  • El movimiento es producido por una función aleatoria inteligente que cambia la velocidad y dirección de cada mensaje separadamente..
  • Añade tantos mensajes como quieras.
  • Cambia el enlace, fuente, tamaño de fuente y color de fuente, así como el fondo de cada mensaje por separado.

EL CÓDIGO ES EL SIGUIENTE 

<html>

<head>
</head>
<script>
<!– Beginning of JavaScript –

var message=new Array()
message[0]=»TEXTO1″
message[1]=»TEXTO2″
message[2]=»TEXTO3″
message[3]=»TEXTO4″
message[4]=»TEXTO5″

// You may add a link for each message.
// In case you do not want to link a message just add a ‘#’ instead of an URL
var message_link=new Array()
message_link[0]=»URL DE LA PAGINA WEB»
message_link[1]=»URL DE LA PAGINA WEB»
message_link[2]=»URL DE LA PAGINA WEB»
message_link[3]=»URL DE LA PAGINA WEB»
message_link[4]=»URL DE LA PAGINA WEB»

// font-family for each message
var message_font=new Array()
message_font[0]=»Comic Sans MS»
message_font[1]=»Times»
message_font[2]=»Courier»
message_font[3]=»Verdana»
message_font[4]=»Arial»

// font-size for each message
var message_fontsize=new Array()
message_fontsize[0]=14
message_fontsize[1]=12
message_fontsize[2]=10
message_fontsize[3]=9
message_fontsize[4]=8

// font-color for each message
var message_fontcolor=new Array()
message_fontcolor[0]=»yellow»
message_fontcolor[1]=»black»
message_fontcolor[2]=»FF0000″
message_fontcolor[3]=»007700″
message_fontcolor[4]=»000077″

// backgroundcolor for each message
var message_bgcolor=new Array()
message_bgcolor[0]=»black»
message_bgcolor[1]=»yellow»
message_bgcolor[2]=»FFDDDD»
message_bgcolor[3]=»DDFFDD»
message_bgcolor[4]=»DDDDFF»

// font-weight for each message. Choose a value between 1 and 9
var message_fontweight=new Array()
message_fontweight[0]=1
message_fontweight[1]=9
message_fontweight[2]=5
message_fontweight[3]=7
message_fontweight[4]=9

// width for each message (pixels)
var message_width=new Array()
message_width[0]=300
message_width[1]=200
message_width[2]=300
message_width[3]=200
message_width[4]=100

// padding for each message (pixels)
var message_padding=new Array()
message_padding[0]=4
message_padding[1]=4
message_padding[2]=4
message_padding[3]=4
message_padding[4]=3

// padding for each message (pixels)
var message_border=new Array()
message_border[0]=1
message_border[1]=1
message_border[2]=1
message_border[3]=1
message_border[4]=1

// average speed of the floating images. Higher means faster
var floatingspeed=3

// do not edit the variables below
var tempo=20
var numberofmessages=message.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofmessages;i++) {
stepx[i]=randommaker(floatingspeed)
stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofmessages;i++) {
imgwidth[i]=10
imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
for (i=0;i<=numberofmessages;i++) {
message_fontweight[0]=100message_fontweight[0]
message_fontweight[1]=100
message_fontweight[1]
message_fontweight[2]=100message_fontweight[2]
message_fontweight[3]=100
message_fontweight[3]
message_fontweight[4]=100*message_fontweight[4]
}

var spancontent=new Array()
for (i=0;i<=numberofmessages;i++) {
spancontent[i]=»<table border=»+message_border[i]+» cellpadding=»+message_padding[i]+» width=»+message_width[i]+» cellspacing=0><tr><td valign=top bgcolor=»+message_bgcolor[i]+»>»
spancontent[i]+=»<span style=’position:relative; font-family:»+message_font[i]+»;font-size:»+message_fontsize[i]+»pt;font-weight:»+message_fontweight[i]+»‘>»
spancontent[i]+=»<a href='»+message_link[i]+»‘ style=’text-decoration:none’>»
spancontent[i]+=»<font color=»+message_fontcolor[i]+»>»
spancontent[i]+=message[i]
spancontent[i]+=»</a>»
spancontent[i]+=»</span>»
spancontent[i]+=»</td></tr></table>»
}

function setValues() {
if (document.all) {
marginbottom=document.body.clientHeight-5
marginright=document.body.clientWidth-5
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(«document.all.span»+i)
thisspan.innerHTML=spancontent[i]
var thisspan = eval(«document.all.span»+(i)+».style»)
thisspan.posLeft=randommaker(marginright)
thisspan.posTop=randommaker(marginbottom)
}
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(«document.all.span»+i)
imgwidth[i]=thisspan.offsetWidth
imgheight[i]=thisspan.offsetHeight

  }
  checkmovement()
 }
}

function randommaker(range) {
rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}

function checkmovement() {
if (document.all) {
checkposition()
movepictures()
timer=setTimeout(«checkmovement()»,tempo)
}
}

function movepictures() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisspan=eval(«document.all.span»+(i)+».style»)
thisspan.posLeft+=stepx[i]
thisspan.posTop+=stepy[i]
}
}
}

function checkposition() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisspan=eval(«document.all.span»+i+».style»)
if (thisspan.posLeft>marginright-imgwidth[i]) {
thisspan.posLeft-=Math.abs(stepx[i]+1)
stepx[i]=randommaker(floatingspeed)-1
}
if (thisspan.posLeft<marginleft) {
thisspan.posLeft+=Math.abs(stepx[i])
stepx[i]=randommaker(floatingspeed)
}
if (thisspan.posTop>marginbottom-imgheight[i]) {
thisspan.posTop-=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)
-1

   }
if (thisspan.posTop<margintop) {
thisspan.posTop+=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)
}
}
}
}

// – End of JavaScript – –>
</script><body id=»thisbody» bgcolor=»#FFFFFF» onLoad=»setValues()» style=»width: 100%; overflow-x: hidden; overflow-y: hidden»><script>
<!– Beginning of JavaScript –

for (i=0;i<=numberofmessages;i++) {
document.write(«<span id=’span»+i+»‘ style=’position:absolute;z-index:100’></span>»)
document.close()
}

// – End of JavaScript – –>
</script></b></p>
<div id=»deletethisblock» style=»position:absolute;top:50px;left:50px;»>

</div>

</body>

</html>

Facebook: https://www.facebook.com/EIMafias/

Twitter:@ElMafiasdelTuit

Instagram: https://www.instagram.com/paramissuperioresoficial/

Twitch: https://www.twitch.tv/eimafias/

ElMafias

Compartir
Publicado por
ElMafias
Etiquetas: Tutoriales

Entradas recientes

Cómo usar un Ipad Mini como monitor pc

Cómo usar un Ipad Mini como monitor pc

En este tutorial vamos hacer que un ipad mini haga de segundo monitor. Para que…

1 semana hace
Activar cuenta Super Administrador en Windows 10

Activar cuenta Super Administrador en Windows 10

Cuando tenemos algún problema en Windows y lo intentas solucionar desde el usuario de administrador …

2 semanas hace
Aprende a programar con LOGO en el emulador Applewin

Aprende a programar con LOGO en el emulador Applewin

Allá por el año 1988 en el colegio teníamos una asignatura que era informática y…

2 meses hace
Cómo añadir Roms a Recalbox Raspberry pi 4.

Cómo añadir Roms a Recalbox Raspberry pi 4.

Ayer os explicaba como instalar Recalbox en nuestra Raspberry pi 4.  Hoy vamos añadir roms a través…

2 meses hace
Instalar Recalbox en una tarjeta microSD de 128 GB para Raspberry Pi 4

Instalar Recalbox en una tarjeta microSD de 128 GB para Raspberry Pi 4

Hace unos años explicamos como crear una consola retro en una Raspberry pi 3. En…

2 meses hace
Cómo cambiar el nombre de Nueva Carpeta predeterminada desde regedit

Cómo cambiar el nombre de Nueva Carpeta predeterminada desde regedit

Cuando creamos una carpeta nueva en Windows 10, la carpeta recibe el nombre de “Nueva…

2 meses hace