Tema: Opcion a cambiar tamaño de letra como los periódicos OnLine
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 23/05/2012, 07:45
Avatar de djaevi
djaevi
 
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años, 1 mes
Puntos: 47
Respuesta: Opcion a cambiar tamaño de letra como los periódicos OnLine
Te dejo un ejemplo muy simple aver si te sirve para adaptarlo a tu proyecto si tienes alguna duda me avisas.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style>
  7.     #contenedor {
  8.         position:absolute;
  9.         width:770px;
  10.         left:50%;
  11.         margin-left:-385px;
  12.     }
  13.     
  14.     #head {
  15.         background-image:url(head.png);
  16.         height:20px;
  17.         width:100%;
  18.     }
  19.     
  20.     #body {
  21.         background-image:url(body.png);
  22.         width:100%;
  23.     }
  24.     
  25.     #relleno {
  26.         position:relative;
  27.         top:0px;
  28.         width:90%;
  29.         left:5%;
  30.     }
  31.     
  32.     #titulo {
  33.         font-family:"Trebuchet MS";
  34.         color:#006600;
  35.         font-size:18px;
  36.         padding-bottom:10px;
  37.     }
  38.     
  39.     #noticia {
  40.         font-family:"Trebuchet MS";
  41.         color:#006666;
  42.         font-size:14px;
  43.         padding-bottom:10px;
  44.     }
  45.     
  46.     #foot {
  47.         height:20px;
  48.         width:100%;
  49.     }
  50. </style>
  51.  
  52. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  53. <script type="text/javascript">
Código Javascript: 
Ver original
  1. function resize(e) {    
  2.     var titulo = $("#titulo").css("font-size");
  3.     var noticia = $("#noticia").css("font-size");
  4.     var fontSizeTitulo = titulo.substring(titulo.length-2,titulo);
  5.     var fontSizeNoticia = titulo.substring(noticia.length-2,noticia);
  6.         if (e) {
  7.             $("#titulo").css("font-size",Number(fontSizeTitulo) + 2 + "px");
  8.             $("#noticia").css("font-size",Number(fontSizeNoticia) + 2 + "px");
  9.         }else{
  10.             $("#titulo").css("font-size",Number(fontSizeTitulo) - 2 + "px");
  11.             $("#noticia").css("font-size",Number(fontSizeNoticia) - 2 + "px");
  12.         }
  13.     }
Código HTML: 
Ver original
  1. </script>
  2.  
  3. </head>
  4.  
  5. <body>
  6.     <div id="contenedor">
  7.         <div id="relleno">
  8.             <div id="titulo">
  9.                 Boca le gano al Flu
  10.             </div>
  11.             <div id="noticia">
  12.                 Con un gol de Pablo Mouche (ST 6m), el equipo de Julio Falcioni se impuso por 1-0 en la Bombonera, en la ida de los cuartos de final. La visita jugó con 10 por la expulsión de Carlinhos (PT 33m). 
  13.             </div>
  14.             <div id="imgHolder">
  15.                 <img src="http://www.tycsports.com/adjuntos/104/imagenes/001/409/0001409334.jpg" />
  16.             </div>
  17.         </div><br /><br />
  18.     <a href="#" onclick="resize(false)"> Achicar </a><br />
  19.     <a href="#" onclick="resize(true)"> Agrandar </a>
  20.     </div>
  21. </body>
  22. </html>

Saludos