Publicentral.com - promocion,paginas,web,tutores,publicentralPromocion de paginas webs
Mostrando Codigo - Javascript
Code

Javascript - Scroll html

Códigos Javascript

El script presenta un scroll muy util para incluir noticias en tu web, ademas de soportar html, pudiendo incluir enlaces, colores, etc...
Visitas: 26,042 - 12/10/2003 22:37:58
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Modificar la linea 2 para el contenido html y las variables entre linea 5 y 9
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <script language="javascript">
  2. var content='<p>Visita <a href="http://www.Tutores.org">Tutores.org</a> Web de webmasters para webmasters foros,scripts...<font color="#cc0000">Gratis</font> </p><p><a href="http://google.com">Google.com</a>- Visita uno de los mejores buscadores de la red</p><p>';
  3. var altura=150;        
  4. var anchura=150;        
  5. var el_color="#FFF6e9";  
  6. var Velocidad=50;            
  7. var pasos=2;          
  8. var godown=false;
  9. var outer,inner,Altura_elemento,ref,refX,refY;
  10. var w3c=(document.getElementById)?true:false;
  11. var ns4=(document.layers)?true:false;
  12. var ie4=(document.all && !w3c)?true:false;
  13. var ie5=(document.all && w3c)?true:false;
  14. var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
  15. var txt='';
  16. if(ns4){
  17. txt+='<table cellpadding=0 cellspacing=0 border=0 height='+altura+' width='+anchura+'><tr><td>';
  18. txt+='<ilayer name="ref" bgcolor="'+el_color+'" width='+anchura+' height='+altura+'></ilayer>';
  19. txt+='</td></tr></table>'
  20. txt+='<layer name="outer" bgcolor="'+el_color+'" visibility="hidden" width='+anchura+' height='+altura+'>';
  21. txt+='<layer  name="inner"  width='+(anchura-4)+' height='+(altura-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
  22. txt+='</layer>';
  23. }else{
  24. txt+='<div id="ref" style="position:relative; width:'+anchura+'; height:'+altura+'; background-color:'+el_color+';" ></div>';
  25. txt+='<div id="outer" style="position:absolute; width:'+anchura+'; height:'+altura+'; visibility:hidden; background-color:'+el_color+'; overflow:hidden" >';
  26. txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(anchura-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
  27. txt+='</div>';
  28. }
  29. document.write(txt);
  30. function consigue_altura(el){
  31. if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
  32. else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
  33. else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
  34. }
  35. function Pagina_izquierda(el){
  36. var x;
  37. if(ns4)return el.pageX;
  38. if(ie4||w3c){
  39. x = 0;
  40. while(el.offsetParent!=null){
  41. x+=el.offsetLeft;
  42. el=el.offsetParent;
  43. }
  44. x+=el.offsetLeft;
  45. return x;
  46. }}
  47. function Pagina_altura(el){
  48. var y;
  49. if(ns4)return el.pageY;
  50. if(ie4||w3c){
  51. y=0;
  52. while(el.offsetParent!=null){
  53. y+=el.offsetTop;
  54. el=el.offsetParent;
  55. }
  56. y+=el.offsetTop;
  57. return y;
  58. }}
  59. function scrollbox(){
  60. if(ns4){
  61. inner.top+=(godown)? pasos: -pasos;
  62. if(godown){
  63. if(inner.top>altura)inner.top=-Altura_elemento;
  64. }else{
  65. if(inner.top<2-Altura_elemento)inner.top=altura+2;
  66. }}else{
  67. inner.style.top=parseInt(inner.style.top)+((godown)? pasos: -pasos)+'px';
  68. if(godown){
  69. if(parseInt(inner.style.top)>altura)inner.style.top=-Altura_elemento+'px';
  70. }else{
  71. if(parseInt(inner.style.top)<2-Altura_elemento)inner.style.top=altura+2+'px';
  72. }}}
  73. window.onresize=function(){
  74. if(ns4)setTimeout('history.go(0)', 400);
  75. else{
  76. outer.style.left=Pagina_izquierda(ref)+'px';
  77. outer.style.top=Pagina_altura(ref)+'px';
  78. }}
  79. window.onload=function(){
  80. outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
  81. inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
  82. ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
  83. Altura_elemento=consigue_altura(inner);
  84. if(ns4){
  85. outer.moveTo(Pagina_izquierda(ref),Pagina_altura(ref));
  86. outer.clip.width=anchura;
  87. outer.clip.height=altura;
  88. inner.top=(godown)? -Altura_elemento : altura-2;
  89. inner.clip.width=anchura-4;
  90. inner.clip.height=Altura_elemento;
  91. outer.visibility="show";
  92. inner.visibility="show";
  93. }else{
  94. outer.style.left=Pagina_izquierda(ref)+'px';
  95. outer.style.top=Pagina_altura(ref)+'px';
  96. inner.style.top=((godown)? -Altura_elemento : altura)+'px';
  97. inner.style.clip='rect(0px, '+(anchura-4)+'px, '+(Altura_elemento)+'px, 0px)';
  98. outer.style.visibility="visible";
  99. }
  100. setInterval('scrollbox()',Velocidad);
  101. }
  102. </script>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Scroll html" href="http://www.tutores.org/codigo/702/" target="_blank">Scroll html</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Yllelder
3 5
También funciona en Firefox (2.x). Pero estoy intentando ponerlo en una página .php y el contenido a desplazar es un script en php y no funciona. ¿Sólo funciona con texto plano?
Comentario usuario
24-09-2007 10:13:52
5 5
Hola este scrip no funciona con al etiqueta
<!DOCTYPE HTML PUBLIC...
Comentario usuario
23/10/2003 10.47.59
4 5
Saludos. Este script me es muy útil para lo que tengo en mente, pero el detalle que me gustaría saber es cómo hacer que se detenga cuando pase el cursor por encima del contenido mostrado. ¿?
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.