En este tutorial, estamos creando un simple rotador de banner PHP, jQuery y MySQL, con el que puede crear y mostrar banners aleatoriamente en su sitio. Cada uno de los banners presenta un elegante efecto de animación jQuery, que puede personalizar para satisfacer sus propias necesidades.
El esquema de la base de datos
Antes de comenzar a codificar, echemos un vistazo a la base de datos. Todos los banners se insertan en los banners tabla mysql Tiene la siguiente estructura:
Identificación es una clave principal, que se incrementa automáticamente, lo que significa que no necesita agregar un número en ese campo si está insertando manualmente nuevos banners. La siguiente es la imagen campo, que contiene el nombre de archivo del banner, después de que sea el nombre de la empresa y por último la URL del sitio de la empresa, todos los cuales son campos varchar (cadenas regulares).
Si desea ejecutar la demostración en su propio host, deberá volver a crear esta tabla a partir de las definiciones dentro de table.sql en el archivo de descarga. Simplemente pegue el código SQL en su administrador de MySQL. Además, no olvide completar sus datos de inicio de sesión de MySQL en connect.php , antes de cargar los archivos en su servidor.
Paso 1 - XHTML
PHP genera sobre la marcha el código XHTML de los banners después de una consulta a la base de datos y lo envía a la página. Así es como se ve el marcado de un banner de muestra:
demo.php
<div class="banner">
<a href="http://www.rapidxhtml.com/">
<img src="img/banners/rapidHTML.png" alt="Rapid HTML"
width="125" height="125" />
</a>
<p class="companyInfo">Visit Rapid HTML</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div> Dentro de cada div de banner, tenemos un hipervínculo al sitio de la empresa, un banner estándar de 125 x 125 px, un párrafo con el nombre de la empresa y cuatro divs en las esquinas.
El párrafo y los divs de las esquinas están ocultos de forma predeterminada y se muestran cuando el usuario mueve el mouse sobre el banner principal. división Esto asegura que los banners funcionen perfectamente incluso con JavaScript deshabilitado, aunque sin la transición elegante.
Paso 2:CSS
Pasemos al estilo de la página. Para garantizar la compatibilidad entre navegadores, primero debemos restablecer los estilos predeterminados que los navegadores aplican a los elementos de la página. Esto es fácil de hacer con un restablecimiento de página universal:
estilos.css - Parte 1
*{
/* A universal page reset */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.bannerHolder{
/* The main banner unordered list */
height:270px;
width:270px;
float:left;
margin:20px 15px;
padding:10px;
background:#f7f7f7;
border:1px solid #eee;
/* CSS3 rounded corners */
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.bannerHolder li{
/* Hiding the bullets of the li elements: */
list-style:none;
display:inline;
}
.banner{
/* The banner divs */
position:relative;
width:125px;
height:125px;
overflow:hidden;
float:left;
margin:5px;
}
.banner img{
/* The banner divs */
display:block;
border:none;
} Como los banners están organizados en una lista desordenada, primero diseñamos la lista en sí (a la que se le asigna el bannerHolder class), luego los elementos li dentro de él y, por último, los divs de banner.
Como tenemos dos grupos de banners en la página, tenemos que ceñirnos a los nombres de clase para orientar los elementos en el CSS, ya que las ID deben ser únicas y no permiten más de un elemento con la misma ID.
estilos.css - Parte 2
.banner div{
/* The dark animated divs */
position:absolute;
z-index:100;
background-color:#222;
width:60px;
height:60px;
cursor:pointer;
/* Setting a really big value for border-radius
will make the divs perfect circles */
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
/* Positioning the animated divs outside the
corners of the visible banner area: */
.banner .cornerTL{ left:-63px;top:-63px; }
.banner .cornerTR{ right:-63px;top:-63px; }
.banner .cornerBL{ left:-63px;bottom:-63px; }
.banner .cornerBR{ right:-63px;bottom:-63px; }
.banner p{
/* The "Visit Company" text */
display:none; /* hidden by default */
left:0;
top:57px;
width:100%;
z-index:200;
position:absolute;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:white;
font-size:11px;
text-align:center;
cursor:pointer;
} En la segunda parte del código, diseñamos los divs redondeados animados que se deslizan a la vista con mouseenter. Estamos usando el border-radius propiedad CSS3 y dándole un 100px valor, convertimos los divs en círculos perfectos. También colocamos cada uno de los cuatro divs justo fuera de su div principal.
Paso 3 - PHP
Pasando a la parte de PHP, primero echaremos un vistazo a la clase de banner.
banner.clase.php
class Banner{
private $data = array();
public function __construct($row){
$this->data = $row;
}
public function html(){
/* This method returns the banner's HTML code */
$d = &$this->data;
$d['company'] = htmlspecialchars($d['company']);
return '
<div class="banner">
<a href="'.$d['url'].'">
<img src="img/banners/'.$d['image'].'" alt="'.$d['company'].'"
width="125" height="125" />
</a>
<p class="companyInfo">Visit '.$d['company'].'</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>';
}
} El método constructor de la clase se ejecuta cuando creamos un objeto banner. Copia la $fila variable que pasamos como parámetro a sus $datos privados internos matriz.
El otro método - html() - devuelve el código HTML del banner.
Puede ver a continuación cómo se utilizan esta clase y sus métodos:
demo.php
$bannerResult = mysql_query("SELECT * FROM banners");
$banners = array();
while($row=mysql_fetch_assoc($bannerResult))
{
$banners[] = new Banner($row);
}
// Randomizing the $banners array:
shuffle($banners);
// Splitting the banners array into smaller arrays with 4 banners each:
$bannerGroups = array_chunk($banners,4); Después de seleccionar todos los banners de la base de datos, PHP obtiene cada fila del resultado como una matriz asociativa y crea objetos de banner. Después de esto, los $banners resultantes la matriz se baraja y se divide con la ayuda de array_chunk() integrado función.
Como tenemos 8 banners, terminamos con dos elementos en $bannerGroups , que podemos imprimir en la página:
demo.php
<ul class="bannerHolder">
<?php
// Looping through the first group:
foreach($bannerGroups[0] as $ban)
{
echo '<li>'.$ban->html().'</li>';
}
?>
</ul> Con todo el marcado generado y diseñado, podemos continuar con la parte de jQuery del tutorial.
Paso 4 - jQuery
Después de incluir la biblioteca jQuery en la página, podemos comenzar a escribir nuestro propio código JavaScript en script.js.
secuencia de comandos.js
$(document).ready(function(){
// Lowering the opacity of all slide in divs
$('.banner div').css('opacity',0.4);
// Using the hover method
$('.banner').hover(function(){
// Executed on mouseenter
var el = $(this);
// Find all the divs inside the banner div,
// and animate them with the new size
el.find('div').stop().animate({width:200,height:200},'slow',function(){
// Show the "Visit Company" text:
el.find('p').fadeIn('fast');
});
},function(){
// Executed on moseleave
var el = $(this);
// Hiding the text
el.find('p').stop(true,true).hide();
// Animating the divs
el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
// When clicked, open a tab with the address of the hyperlink
window.open($(this).find('a').attr('href'));
});
}); Con el método de desplazamiento, vinculamos dos funciones al mouseenter y la hoja de ratón eventos. Estos muestran y ocultan respectivamente los cuatro divs redondeados y la etiqueta de párrafo.
Observe el uso de stop() que, como su nombre indica, detiene una animación en ejecución. Recuerde que si necesita detener un efecto integrado como fadeOut() , debe pasar dos verdadero adicionales parámetros a la función.
Detener las animaciones es importante, ya que activar una nueva animación antes de que se complete la anterior hará que se acumulen, lo que definitivamente no es deseable.
Finalmente, debido a que el hipervínculo está oculto debajo de los divs y, por lo tanto, no se puede hacer clic en ellos, escuchamos el evento de clic en el div del banner principal y abrimos una nueva pestaña en la URL adecuada cuando ocurre el evento.
¡Con esto, nuestra secuencia de comandos giratoria de banner simple está completa!
Conclusión
En este tutorial demostramos algunas de las funciones de programación orientada a objetos de PHP, animaciones jQuery y algunos efectos CSS interesantes. Eres libre de modificar este código y usarlo como quieras.
¿Qué opinas? ¿Cómo modificarías este script?