| Sección
"Java Scripts" |
|
Lección
88 |
Efecto
mensajes móviles en barra de estado.
Este
es un efecto muy hermoso al cual puedes instalar
fácilmente en tu sitio, para ver como funciona,
solo mira lo que sucede en la parte inferior de la
pantalla en la barra de abajo.
Para
lograr este efecto pegas este Script en cualquier sector de tu sitio, pero
siempre debajo de donde dice
<Head> en el HTML de tu página:
<SCRIPT LANGUAGE="JavaScript">
<!--// Copyright 1996 - Tomer and Yehuda Shiran
// This example will appear in our forthcoming book on JavaScript.
// Feel free to "steal" this code provided that you leave this notice as is.
// Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/
// For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>
// set speed of banner (pause in milliseconds between addition of new character)
var speed = 10
// decrease value to increase speed (must be positive)
// set pause between completion of message and beginning of following message
var pause = 1500
// increase value to increase pause
// set initial values
var timerID = null
var bannerRunning = false
// create array
var ar = new Array()
// assign the strings to the array's elements
ar[0] = "Bienvenido a nuestra página"
ar[1] = "Somos los
Webgasoleros"
ar[2] = "Estamos para ayudarte y
aprender"
ar[3] = "Disfruta de nuestro sitio y seamos
amigos!!!"
// assign index of current message
var message = 0
// empty string initialization
var state = ""
// no value is currently being displayed
clearState()
// stop the banner if it is currently running
function stopBanner() {
// if banner is currently running
if (bannerRunning)
// stop the banner
clearTimeout(timerID)
// timer is now stopped
timerRunning = false
}
// start the banner
function startBanner() {
// make sure the banner is stopped
stopBanner()
// start the banner from the current position
showBanner()
}
// assign state a string of "0" characters of the length of the current message
function clearState() {
// initialize to empty string
state = ""
// create string of same length containing 0 digits
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}
// display the current message
function showBanner() {
// if the current message is done
if (getString()) {
// increment message
message++
// if new message is out of range wrap around to first message
if (ar.length <= message)
message = 0
// new message is first displayed as empty string
clearState()
// display next character after pause milliseconds
timerID = setTimeout("showBanner()", pause)
}
else {
// initialize to empty string
var str = ""
// built string to be displayed (only character selected thus far are displayed)
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
// partial string is placed in status bar
window.status = str
// add another character after speed milliseconds
timerID = setTimeout("showBanner()", speed)
}
}
function getString() {
// set variable to true (it will stay true unless proven otherwise)
var full = true
// set variable to false if a free space is found in string (a not-displayed char)
for (var j = 0; j < state.length; ++j) {
// if character at index j of current message has not been placed in displayed string
if (state.charAt(j) == 0)
full = false
}
// return true immediately if no space found (avoid infinitive loop later)
if (full) return true
// search for random until free space found (braoken up via break statement)
while (1) {
// a random number (between 0 and state.length - 1 == message.length - 1)
var num = getRandom(ar[message].length)
// if free space found break infinitive loop
if (state.charAt(num) == "0")
break
}
// replace the 0 character with 1 character at place found
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
// return false because the string was not full (free space was found)
return false
}
function getRandom(max) {
// create instance of current date
var now = new Date()
// create a random number (good generator)
var num = now.getTime() * now.getSeconds() * Math.random()
// cut random number to value between 0 and max - 1, inclusive
return num % max
}
startBanner()
// -->
</SCRIPT>
|
Lo
que pinté con rojo corresponde a los mensajes que salen en la
pantalla realizando el efecto, lo cambias a gusto.
Aquí copio nuevamente el código con
opción para seleccionarlo, cortar y pegar en tu
sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccinar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar debajo de donde dice <Head>
en el HTML de tu página:
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Recordemos
que este Script también puede ser hallado en el
programa AAScripter v2, el cual puedes bajar de aquí:
http://www.cyberiapc.com
Buena
suerte.
|
