Ayuda - Webmaster Foros
!Bienvenid@¡

Encuentra Aportes de Diseño & Desarrollo Web, para colocar tus aportes crea una nueva cuenta.

¡Que la pases bien y hasta pronto!

Scroll para noticias vertical

Ir abajo

Scroll para noticias vertical

Mensaje por Orbe el Sáb 24 Mar - 11:56

1:
Lo que puedes configurar esta todo descrito a la derecha de las variables.
El codigo tiene para 7 noticias, tu puedes agregarle más de la siguiente forma:

noticias[8]= new noticia("Titulo noticia","","texto...","http://enlace/","_self")
noticias[9]= new noticia("Titulo noticia","","texto...","http://enlace/","_blank")

Como ves simplemente le agregamos otra linea y le ponemos el numero siguiente, recuerda que son 4 "comillas" y separando cada una con una coma ("","","","").

_blank: el enlace se abre en una nueva ventana.
_self: el enlace se abre en la misma ventana.

Si las noticias no tienen enlaces puedes indicarlo aqui:
var masInfo = true cambiando "true" por "false".

2: Modificar el tag body.
Luego de configurar las noticias buscas el tag <body> en tu pagina web y lo reemplazas por esto:
<body onload="escrolea()">

3: Llamar al scroll.
Ahora, donde quieras poner el scroll de noticias en tu web, debes poner el siguiente codigo:
<script>escribe()</script>

Código:

<!-- Inicio del codigo -->

<script language="JavaScript" type="text/JavaScript">
var ancho = 250 //anchura del cuadro
var alto = 120 //altura del cuadro
var marco = 1 //escribe 0 si no quieres borde
var fondo = '#FFFFFF' //color de fondo del cuadro
var pausilla = 2000 //tiempo de la pausa entre noticia en milisegundos (2000 = 2 segundos)
var destino = "_blank" //_blank para abrir enlaces en nueva ventana, _self en la misma.
var cursor = "default;"
var colTitular = '#006699' //color del texto del titular
var colTexto = '#999999' // color del texto de la noticia
var colFecha = '#3399FF' //color del texto de la fecha
var colEnlace = '#660000' //color del texto del enlace
var fuente = "arial" //fuente para los todos los textos
var tamTitular = '14' //tamaño de la fuente del titular
var tamTexto = '12' //tamaño de la fuente del texto de la noticia
var tamFecha = '10' // tamaño de la fuente de la fecha
var tamEnlace = '11' // tamaño de la fuente del enlace
var masInfo = true //Determina si se usa o no el enlace. true para usarlo. false para omitirlo
var poneFecha = true //true para poner fecha. false para omitirla. Si no se quiere fecha, dejar las comillas vacías ""

function noticia(titular,texto,fecha,enlace,destino){
this.titular = titular
this.texto = texto
this.fecha= fecha
this.enlace = enlace
this.destino = destino
}
var noticias = new Array()

noticias[0]= new noticia("Titulo de la noticia 1","texto de la noticia 1","fecha de la noticia 1","http://creaweb.blogspot.com/","_blank")
noticias[1]= new noticia("Somos la mejor web de todas, la mentira mas grande","texto.. y mas texto...","11/08/07","http://creaweb.blogspot.com/","_blank")
noticias[2]= new noticia("Harry potter and the deathly hallows","Y el final llego :(","21/07/07","#","_blank")
noticias[3]= new noticia("Titulo noticia","texto...","fecha","http://creaweb.blogspot.com/","_blank")
noticias[4]= new noticia ("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[5]= new noticia ("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[6]= new noticia("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[7]= new noticia("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")

var det = false
function escribe(){
document.write ('<div id="mami" style="width:' + ancho + 'px; height:' + alto + 'px; position:relative; overflow:hidden ">')
document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + 'px" height="100%"><tr><td valign="top">')
document.write ('<div id="uno" style="top:' + alto +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[0].titular)
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[0].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[0].texto)
document.write ('</div>')
if(masInfo == true){
document.write ('<a class="enlace" href="')
document.write (noticias[0].enlace)
document.write ('" target="' + destino + '">Más información</a>')
}
document.write ('</div>')
document.write ('<div id="dos" style="top:' + (alto*2) +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[1].titular)
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[1].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[1].texto)
document.write ('</div>')
if(masInfo == true){
document.write ('<a class="enlace" href="')
document.write (noticias[1].enlace)
document.write ('" target = "' + destino + '">más información...</a>')
}
document.write ('</div>')
document.write('</td></tr></table>')
document.write ('</div>')
if(navigator.appName == "Netscape")
{altoUno = document.getElementById('uno').offsetHeight}
else
{altoUno = document.getElementById('uno').clientHeight}
document.getElementById('uno').onmouseover =function(){
det = true
clearTimeout(tiempo)
}
document.getElementById('uno').onmouseout =function(){
det = false;
clearTimeout(tiempo)
escrolea()
}

document.getElementById('dos').onmouseover =function(){
det = true
clearTimeout(tiempo)
}
document.getElementById('dos').onmouseout =function(){
det = false;
clearTimeout(tiempo)
escrolea()

}
}
desp = 1
var cont = 1
var pos,pos2
function escrolea(){
pos = document.getElementById('uno').style.top
pos = pos.replace(/px/,"");
pos = pos.replace(/pt/,"");
pos = new Number(pos);
pos2 = document.getElementById('dos').style.top
pos2 = pos2.replace(/px/,"");
pos2 = pos2.replace(/pt/,"");
pos2 = new Number(pos2);
pos -= desp
pos2 -= desp

if (pos == desp){
var contenidos = ""
document.getElementById('dos').style.top = alto + "px"
document.getElementById('dos').childNodes[0].firstChild.nodeValue = noticias[cont].titular
if(poneFecha == true){
document.getElementById('dos').childNodes[1].firstChild.nodeValue = noticias[cont].fecha
}
document.getElementById('dos').childNodes[2].firstChild.nodeValue = noticias[cont].texto
if(masInfo == true){
document.getElementById('dos').childNodes[3].href = noticias[cont].enlace
}
document.getElementById('uno').style.top = 0
if(cont == noticias.length-1)
{cont=0}
else{
cont++
}
pausa()
return false
}
else{
if (pos2 == desp){
var contenidos = ""
document.getElementById('uno').style.top = alto + "px"
document.getElementById('uno').childNodes[0].firstChild.nodeValue = noticias[cont].titular
if(poneFecha == true){
document.getElementById('uno').childNodes[1].firstChild.nodeValue = noticias[cont].fecha
}
document.getElementById('uno').childNodes[2].firstChild.nodeValue = noticias[cont].texto
if(masInfo == true){
document.getElementById('uno').childNodes[3].href = noticias[cont].enlace
}
document.getElementById('dos').style.top = 0
if(cont == noticias.length-1)
{cont=0}
else{
cont++
}
pausa()
return false
}
else{
document.getElementById('uno').style.top = pos + "px"
document.getElementById('dos').style.top = pos2 + "px"
}
}
tiempo = window.setTimeout('escrolea()',50)
}
var tiempo
function pausa()
{
clearTimeout(tiempo)
if (det == false){
tiempo = setTimeout ('continuar()',2000)
}
}
function continuar()
{
if(det == false)
{escrolea()}
}

document.write('<style type="text/css">')
document.write ('#uno {')
document.write ('color: #006699;')
if(cursor == "pointer" || cursor == "hand"){
cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
}
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('#dos {')
document.write ('color: #006699;')
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('.titular{')
document.write ('color:' + colTitular +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamTitular + 'px;font-weight:bold}')
document.write ('.texto{')
document.write ('color:' + colTexto + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamTexto + 'px;}')
if(poneFecha == true){
document.write ('.fecha{')
document.write ('color:' + colFecha +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamFecha + 'px;font-weight:bold}')
}
else{
document.write ('.fecha{display: none;}')
}
document.write ('.enlace{')
document.write ('color:' + colEnlace + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamEnlace + 'px;}')
document.write ('</style>')
</script>

_________________
chatdelmundo.wapego.net
avatar
Orbe
Mod. Global
Mod. Global

Mensajes : 388

http://chatdelmundo.wapego.net

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.