Está usted en Indice > Construcción > Lenguajes > JavaScript > Lecciones y Paso a Paso > Menú barra horizontal con botones para desplazar
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Menú barra horizontal con botones para desplazar

Código JavaScript que crea un menú; en forma de barra horizontal, que se mueve a izquierda y derecha segú;n pasemos el cursor sobre unos botones en los laterales del mismo.

<!-- Colocar dentro de la etiqueta <HEAD> -->

<style>
body{
overflow-x:hidden;
overflow-y:scroll;
}
</style>

<!-- Colocar dentro de la etiqueta <BOBY> - cambia los enlaces y titulos por los de tu web-->

<script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://dynamicdrive.com

Traducido y adaptado por http://www.losrecursosgratis.com
*/

//configura aqui las im?genes
var goleftimage='imagenes/flechaizd.gif'
var gorightimage='imagenes/flechader.gif'
//configura la anchura del men?
var menuwidth=300
//configura la velocidad del scroll (1-10), cuanto mayor, mas r?pido
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="http://www.losrecursosgratis.com.com">LosRecursosGratis.com</a> | <a href="http://www.lazonadejuegos.com">La Zona de Juegos</a> | <a href="http://www.losrecursosgratis.com/directorio.htm">Directorio de recursos para webamsters</a> | <a href="http://vendedoronline.com/promoweb/index.php?ref=raroci">Aumenta las visitas a tu web</a></nobr>'

////NO EDITES NADA A PARTIR DE AQUI////////////

var actualwidth=''
var ns_scroll
function fillup(){
if (document.all){
test2.innerHTML=menucontents
actualwidth=test2.offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
}
window.onload=fillup

function moveleft(){
if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))
test2.style.pixelLeft-=scrollspeed
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (document.all&&test2.style.pixelLeft<0)
test2.style.pixelLeft+=scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
righttime=setTimeout("moveright()",50)
}

if (document.all||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>')
write('<td valign="top">')
if (document.all){
write('<span style="position:relative;width:'+menuwidth+';">')
write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')
write('<span id="test2" style="position:absolute;left:0;top:0">')
write('</span></span></span>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>

</textarea>
<p align="center" style="margin-bottom: 3">
<a class="highlighttext" href="javascript:HighlightAll('test.tiempo4')"><input name="B1" type="button" class="forma_gris" onClick="javascript:HighlightAll('test.tiempo4')" value="Copiar codigo al portapapeles">
</a>
<p align="center" style="margin-bottom: 3">
</form>





Autor: Blasten
www.blasten.com

Usuarios que han visto este tema también han visto...

- Funciones autoejecutables en Javascript
- Coger Variables
- Scroll de noticias con Javascript
- Cómo comunicar Flash y JavaScript en ActionScript 3
- Activar-Desactivar campos con JavaScript


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad






Cursos de Community Manager

Información legal | Política de Privacidad | Contacte con nosotros

Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.


Página generada el 13-02-2012 a las 08:33:43