Tema: Scroll con paradas
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 15/02/2014, 14:48
RaulCDT
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Scroll con paradas
Estoy intentando adaptar el código de tunait a mis necesidades y queria ver si alguien puede ayudarm a modificar

Mi codigo .css es:

Código CSS: 
Ver original
  1. #new {
  2.     clear: both;
  3. }
  4.  
  5. #new li {
  6.     padding: 5px;
  7.     font-size: 12px;
  8. }
  9.  
  10. #new li {
  11.     min-height: 55px;
  12.     background: #222;
  13.     margin: 5px 0;
  14. }
  15.  
  16.  
  17. #new li img {
  18.     float:left;
  19. }
  20.  
  21. #new li a {
  22.     float:left;
  23.     font-size: 13px;
  24.     width: 205px;
  25.     padding-left: 30px;
  26. }

El .html

Código HTML: 
Ver original
  1. <div id="new">
  2.             <h2 class="textouss">Noticias</h2>
  3.             <ul>
  4. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
  5. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
  6. </ul>        </div>
  7.     </div>

Quiero cambiar sus tablas por:

Código HTML: 
Ver original
  1. <ul>
  2. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
  3. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
  4. </ul>

Script de tunait es:

Código Javascript: 
Ver original
  1. var ancho = 300 
  2. var alto = 160 
  3. var marco = 0 
  4. var fondo = '#CCC'
  5. var pausilla = 3000 
  6. var cursor = "default;" 
  7. var colTitular = '#fff' 
  8. var colTexto = '#999999'
  9. var colFecha = '#3399FF' 
  10. var colEnlace = '#660000' 
  11. var fuente = "arial" 
  12. var tamTitular = '14' 
  13. var tamTexto = '12' 
  14. var tamFecha = '10' 
  15. var tamEnlace = '11' 
  16. var alinImagen = 'center'
  17. var margImagen = '1'
  18. var masInfo = true 
  19. var poneFecha = true  
  20.  
  21. function noticia(titular,texto,fecha,enlace,destino,imagen)
  22.     {
  23.     this.titular = titular
  24.     this.texto = texto
  25.     this.imagen = imagen
  26.     this.fecha= fecha
  27.     this.enlace = enlace
  28.     this.destino = destino
  29.     }
  30. var noticias = new Array()
  31.  
  32. noticias[0]= new noticia("titulo noticia","texto","12/5/03","http://www.a.es/","_blank","1.gif")
  33. noticias[1]= new noticia("titulo noticia","texto","15/5/03","#","_blank","2.gif")
  34. noticias[2]= new noticia("titulo noticia","texto","17/5/03","http://www.a.com/","_blank","3.gif")
  35. noticias[3]= new noticia("titulo noticia","texto","23/5/03","http://www.a.com/","_blank",null)
  36. noticias[4]= new noticia("titulo noticia","texto","2/6/03","http://www.a.com/","_blank",null)
  37. noticias[5]= new noticia("titulo noticia","texto","5/6/03","#","_blank",null)
  38. noticias[6]= new noticia("titulo noticia","texto","7/6/03","#","_blank",null)
  39. noticias[7]= new noticia("titulo noticia","texto","2/8/03","#","_blank",null)
  40.  
  41.  
  42. var det = false
  43. var hayIma, claseIma
  44. function escribe(){
  45. document.write ('<div id="mami" style="width:' + ancho + 'px; height:' + alto + 'px; position:relative;  overflow:hidden ">')
  46. document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + '" height="100%"><tr><td valign="top">')
  47. document.write ('<div id="uno" style="top:' + alto +'px; width:' + ancho + 'px; height:' + alto + 'px;  ">')
  48. document.write ('<div class="titular">')
  49. document.write (noticias[0].titular)
  50. document.write ('</div>')
  51. if(noticias[0].imagen != null){
  52.     hayIma = true
  53.     claseIma = 'imagen'
  54.     }
  55. else{
  56.     hayIma = false
  57.     claseIma = 'noImagen'
  58.     }
  59. document.write ('<div class="' + claseIma + '">')
  60. document.write ('<img src="' + noticias[0].imagen + '">')
  61. document.write ('</div>')
  62. document.write ('<div class="fecha">')
  63. document.write (noticias[0].fecha)
  64. document.write ('</div>')
  65. document.write ('<div class="texto">')
  66. document.write (noticias[0].texto)
  67. document.write ('</div>')
  68. if(masInfo == true){
  69.     document.write ('<a class="enlace" href="')
  70.     document.write (noticias[0].enlace)
  71.     document.write ('" target="' + noticias[0].destino + '">más info</a>')
  72.     }
  73. document.write ('</div>')
  74. document.write ('<div id="dos" style="top:' + (alto*2) +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
  75. document.write ('<div class="titular">')
  76. document.write (noticias[1].titular)
  77. document.write ('</div>')
  78. if(noticias[1].imagen != null){
  79.     hayIma = true
  80.     claseIma = 'imagen'
  81.     }
  82. else{
  83.     hayIma = false
  84.     claseIma = 'noImagen'
  85.     }
  86.  
  87. document.write ('<div class="' + claseIma + '">')
  88. document.write ('<img src="' + noticias[1].imagen + '">')
  89. document.write ('</div>')
  90. document.write ('<div class="fecha">')
  91. document.write (noticias[1].fecha)
  92. document.write ('</div>')
  93. document.write ('<div class="texto">')
  94. document.write (noticias[1].texto)
  95. document.write ('</div>')
  96. if(masInfo == true){
  97.     document.write ('<a class="enlace" href="')
  98.     document.write (noticias[1].enlace)
  99.     document.write ('" target = "' + noticias[1].destino + '">más info</a>')
  100.     }
  101. document.write ('</div>')
  102. document.write('</td></tr></table>')
  103. document.write ('</div>')
  104. if(navigator.appName == "Netscape")
  105. {altoUno = document.getElementById('uno').offsetHeight}
  106. else
  107. {altoUno = document.getElementById('uno').clientHeight}
  108. document.getElementById('uno').onmouseover =function(){
  109.     det = true
  110.     clearTimeout(tiempo)
  111.     }
  112. document.getElementById('uno').onmouseout =function(){
  113.     det = false;
  114.     clearTimeout(tiempo)
  115.     escrolea()
  116.     }
  117.  
  118. document.getElementById('dos').onmouseover =function(){
  119.     det = true
  120.     clearTimeout(tiempo)
  121.     }
  122. document.getElementById('dos').onmouseout =function(){
  123.     det = false;
  124.     clearTimeout(tiempo)
  125.      escrolea()
  126.      
  127.     }
  128. }
  129. desp = 1
  130. var cont = 1
  131. var pos,pos2
  132. function escrolea(){
  133. pos = document.getElementById('uno').style.top
  134. pos = pos.replace(/px/,"");
  135. pos = pos.replace(/pt/,"");
  136. pos = new Number(pos);
  137. pos2 = document.getElementById('dos').style.top
  138. pos2 = pos2.replace(/px/,"");
  139. pos2 = pos2.replace(/pt/,"");
  140. pos2 = new Number(pos2);
  141. pos -= desp
  142. pos2 -= desp
  143.  
  144. if (pos == desp){
  145.     var contenidos = ""
  146.     document.getElementById('dos').style.top = alto + "px"
  147.     document.getElementById('dos').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
  148.     if(noticias[cont].imagen != null){
  149.         document.getElementById('dos').childNodes[1].firstChild.src = noticias[cont].imagen
  150.         document.getElementById('dos').childNodes[1].className = 'imagen'
  151.         }
  152.     else{
  153.         document.getElementById('dos').childNodes[1].className = 'noImagen'
  154.         }
  155.     if(poneFecha == true){
  156.     document.getElementById('dos').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
  157.     }
  158.     document.getElementById('dos').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
  159.         if(masInfo == true){
  160.         document.getElementById('dos').childNodes[4].href = noticias[cont].enlace 
  161.         document.getElementById('dos').childNodes[4].href = noticias[cont].destino
  162.         }
  163.     document.getElementById('uno').style.top = 0
  164.     if(cont == noticias.length-1)
  165.         {cont=0}
  166.     else{
  167.         cont++
  168.         }
  169.     pausa()
  170.     return false
  171.     }
  172. else{
  173.     if (pos2 == desp){
  174.         var contenidos = ""
  175.         document.getElementById('uno').style.top = alto + "px"
  176.         document.getElementById('uno').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
  177.         if(noticias[cont].imagen != null){
  178.         document.getElementById('uno').childNodes[1].firstChild.src = noticias[cont].imagen
  179.         document.getElementById('uno').childNodes[1].className = 'imagen'
  180.         }
  181.     else{
  182.         document.getElementById('uno').childNodes[1].className = 'noImagen'
  183.         }
  184.         if(poneFecha == true){
  185.         document.getElementById('uno').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
  186.         }
  187.         document.getElementById('uno').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
  188.         if(masInfo == true){
  189.         document.getElementById('uno').childNodes[4].href  = noticias[cont].enlace
  190.         document.getElementById('uno').childNodes[4].href  = noticias[cont].destino
  191.         }
  192.         document.getElementById('dos').style.top = 0
  193.         if(cont == noticias.length-1)
  194.         {cont=0}
  195.     else{
  196.         cont++
  197.         }
  198.         pausa()
  199.         return false
  200.         }
  201.     else{
  202.         document.getElementById('uno').style.top = pos + "px"
  203.         document.getElementById('dos').style.top = pos2 + "px"
  204.         }
  205.     }
  206. tiempo = window.setTimeout('escrolea()',50)
  207. }
  208. var tiempo
  209. function pausa()
  210. {
  211. clearTimeout(tiempo)
  212. if (det == false){
  213.     tiempo = setTimeout ('continuar()',2000)
  214.     }
  215. }
  216. function continuar()
  217. {
  218. if(det == false)
  219.     {escrolea()}
  220. }
  221.  
  222. document.write('<style type="text/css">')
  223. document.write ('#uno {')
  224. document.write ('color: #006699;')
  225. if(cursor == "pointer" || cursor == "hand"){
  226. cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
  227. }
  228. document.write ('cursor:' + cursor + ";")
  229. document.write ('position:absolute;}')
  230. document.write ('#dos {')
  231. document.write ('color: #006699;')
  232. document.write ('cursor:' + cursor + ";")
  233. document.write ('position:absolute;}')
  234. document.write ('.titular{')
  235. document.write ('color:' + colTitular +';')
  236. document.write ('font-family:' + fuente + ';')
  237. document.write ('font-size :' + tamTitular + 'px;font-weight:bold}')
  238. document.write ('.texto{')
  239. document.write ('color:' + colTexto + ';')
  240. document.write ('font-family:' + fuente + ';')
  241. document.write ('font-size:' + tamTexto + 'px;}')
  242. if(poneFecha == true){
  243. document.write ('.fecha{')
  244. document.write ('color:' + colFecha +';')
  245. document.write ('font-family:' + fuente + ';')
  246. document.write ('font-size :' + tamFecha + 'px;font-weight:bold}')
  247. }
  248. else{
  249. document.write ('.fecha{display: none;}')
  250. }
  251. document.write ('.enlace{')
  252. document.write ('color:' + colEnlace + ';')
  253. document.write ('font-family:' + fuente + ';')
  254. document.write ('font-size:' + tamEnlace + 'px;}')
  255. document.write ('.imagen{')
  256. document.write ('text-align:' + alinImagen + ';')
  257. document.write ('margin: ' + margImagen + 'px;}')
  258. document.write ('.noImagen{display:none;}')
  259. document.write ('</style>')
  260. </script>

El scritp muestra: titulo+imagen+fecha+texto+enlace
y solo quiero imagen + titulo justamente al lado

Espero que alguien pudiera ayudar!