Tema: Multiscroll
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 30/05/2014, 10:03
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Multiscroll
Y el index.html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <link rel="shortcut icon" href="favicon (3).ico" />
  4. <meta name="google-site-verification" content="ATj-yVLdZKC3CNF8OArdBk2pWoqXeNXdXkuFp8T2rYo" />
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  7.     <title>ELECTRODISEÑO</title>
  8.     <meta name="Resource-type" content="Document" />
  9.     <link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />     
  10.     <link rel="stylesheet" type="text/css" href="examples.css" />       
  11.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  12.     <script type="text/javascript" src="vendors/jquery.easings.min.js"></script>
  13.     <script type="text/javascript" src="jquery.multiscroll.js"></script>
  14.  
  15.     <script type="text/javascript">
  16.      $(document).ready(function() {
  17.             $('#myContainer').multiscroll({
  18.                 sectionsColor: ['#C63D0F', '#FF0000', '#7E8F7C', '#FF0000', '#FF0000'],
  19.                 anchors: ['first', 'second', 'third' , 'fourth' , 'five'],
  20.                 menu: '#menu',
  21.                 css3: true,
  22.                 paddingTop: '70px',
  23.                 paddingBottom: '70px'
  24.             });
  25.         });
  26.     </script>
  27.  
  28.  
  29.     <style>
  30.     h1{
  31.         color: #fff;
  32.     }
  33.     
  34.     /* Fixed header and footer.
  35.     * --------------------------------------- */
  36.     #header{
  37.         position:fixed;
  38.         height: 50px;
  39.         display:block;
  40.         width: 100%;
  41.         z-index:9;
  42.         text-align:center;
  43.         padding: 45px 0 0 0;
  44.         src: url(webfontkit-20130325-045916/stop-webfont.ttf);
  45.         background-color: #FF0000;
  46.         font-family: StopD;
  47.         color: #FFF;
  48.         font-size: 36px;
  49.     }
  50.     #footer{
  51.         color: #FFF;
  52.         font-size: 12px;
  53.         position:fixed;
  54.         height: 50px;
  55.         display:block;
  56.         width: 100%;
  57.         z-index:9;
  58.         text-align:center;
  59.         padding: 20px 0 0 0;
  60.         background-color: #FF0000;  
  61.     }
  62.     
  63.     #header{
  64.         top:0px;
  65.     }
  66.     #footer{
  67.         bottom:0px;
  68.     }
  69.     
  70.     /* CSS Document */
  71. .slider{
  72.     width:1000px; /* width en px de la imagenes  */
  73.     height:300px; /* height en px de la imagenes  */
  74.     overflow:hidden; /* no tocar */
  75.     position:relative; /* no tocar */
  76.     padding:0px; /* no tocar */
  77.     margin-top: 0px;
  78.     margin-right: auto;
  79.     margin-bottom: 0px;
  80.     margin-left: auto;
  81. }
  82.  
  83.     </style>
  84. </head>
  85. <body>
  86. <div id="header">ELECTRODISEÑO</div>
  87. <div id="footer">
  88. 2014 © ELECTRODISEÑO | No somos Servicio técnico oficial de todas las marcas anunciadas en esta web. | Las marcas pertenecen a sus dueños legales. |
  89.  <a href="avisolegal.html" target="new">Aviso legal</a> |
  90.   <a href="https://maps.google.es/maps?hl=es&q=Electrodiseño,+jaen&ie=UTF8&geocode=Fe3jUgIdAxPE_w&split=0&hnear=calle+EUROPA,+S/N,+jaen&iwloc=near&source=embed" target="new"  >Localización</a> | <a href='envia_contacto.php' target="_blank">Contacto</a>
  91. </div>
  92.  
  93.  
  94. <ul id="menu">
  95.     <li data-menuanchor="first"><a href="#first">Inicio</a></li>
  96.     <li data-menuanchor="second"><a href="#second">Marcas</a></li>
  97.     <li data-menuanchor="third"><a href="#third">Servicio Oficial</a></li>
  98.     <li data-menuanchor="fourth"><a href="#fourth">Catálogo de Productos</a></li>
  99.     <li data-menuanchor="five"><a href="#five">Ofertas</a></li>
  100.       
  101. </ul>
  102.  
  103.  
  104. <div id="myContainer">
  105.  
  106.     <div class="ms-left">
  107.         <div class="ms-section" id="left1">
  108.         <img src="imgs/FOTO1.png" width="100%" height="100%"> </div>
  109.  
  110.         <div class="ms-section" id="left2">
  111.             <img src="imgs/FOTO3.png" width="100%" height="90%">
  112.         </div>
  113.  
  114.         <div class="ms-section" id="left3">
  115.             <img src="imgs/FOTO.1MARCAS.png" width="100%" height="100%">
  116.         </div>
  117.         
  118.        <div class="ms-section" id="left4">
  119.        <img src="imgs/Captura de pantalla 2014-05-29 a la(s) 17.12.28.png" width="100%" height="100%">
  120.        <img src="imgs/aire.png" width="100%" height="100%">
  121.             
  122.         </div>
  123.         
  124.          <div class="ms-section" id="left5">
  125.        <img src="imgs/aire.png" width="100%" height="90%">
  126.             
  127.         </div>
  128.     </div>
  129.     
  130.     <div class="ms-right">
  131.         <div class="ms-section" id="right1">
  132.         <img src="imgs/FOTO2.5.jpg" width="100%" height="100%"> 
  133.         </div>
  134.         <div class="ms-section" id="right2">
  135.             <img src="imgs/FOTO4.png" width="100%" height="90%">
  136.         </div>
  137.         <div class="ms-section" id="right3">
  138.             <img src="imgs/FOTO.2MARCAS.png" width="100%" height="100%">
  139.         </div>
  140.         
  141.         <div class="ms-section" id="right4">
  142.             <img src="imgs/Captura de pantalla 2014-05-29 a la(s) 17.13.27.png" width="100%" height="100%">
  143.             <img src="imgs/carga-superior.png" width="100%" height="100%">
  144.         </div>
  145.           <div class="ms-section" id="right5">
  146.             <img src="imgs/carga-superior.png" width="100%" height="90%">
  147.         </div>
  148.         
  149.     </div>
  150.  
  151. </div>
  152.  
  153.     </body>
  154. </html>