В этом уроке мы создадим простой ротатор баннеров с помощью PHP, jQuery и MySQL. C помощью него можно случайным образом отображать баннеры на Вашем сайте. Каждый из баннеров также содержит красивый анимационный эффект, который можно подстроить под Ваши нужды.
Схема БД
Перед тем как начать программировать давайте взглянем на нашу базу данных. Все баннеры вставляются в таблицу БД со следующей структурой.
ID - первичный ключ, который добавляется автоматически. Следующее поле - image - содержит название файла баннера. И еще есть поля company name и URL, которые говорят сами за себя.
Шаг 1 - XHTML
XHTML код баннеров генерируется на лету с помощью PHP после запроса к БД, и выводится на странице. Разметка выглядит следующим образом.
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>
Внутри каждого div баннера у нас находится ссылка на сайт компании, стандартный 125 на 125 пикселей баннер и 4 угловых div.
Абзац и углы спрятаны по умолчани и показываются только тогда, когда пользователь перемещает мышку на div .banner. Таким образом мы убеждаемся, что все прекрасно работает даже при отключенном JS.
Шаг 2 - CSS
Теперь давайте перейдем к части со стилями. Для того, чтобы наше творение было кроссбраузерным, первым делом нам необходимо сбросить стили браузеров по умолчанию. Это легко сделать с помощью обычного сброса свойств.
styles.css - часть 1
*{
/* Универсальный сброс */
margin:0;
padding:0;
}
body{
/* Устанавливаем цвет шрифта, фон и шрифт по умолчанию */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.bannerHolder{
/* Главный неупорядоченный список */
height:270px;
width:270px;
float:left;
margin:20px 15px;
padding:10px;
background:#f7f7f7;
border:1px solid #eee;
/* CSS3 закругленные углы */
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.bannerHolder li{
/* Прячем значки элементов li */
list-style:none;
display:inline;
}
.banner{
/* divs баннеров */
position:relative;
width:125px;
height:125px;
overflow:hidden;
float:left;
margin:5px;
}
.banner img{
display:block;
border:none;
}
Поскольку баннеры у нас находятся в неупорядоченном списке, первым делом нам необходимо придать стиль самому списку, далее элементам li внутри списка и div для баннеров.
Поскольку у нас две группы баннеров на странице, нам необходимо придерживаться классовых имен для обращения к элементам в CSS, так как ID должны быть уникальными на странице и не разрешается множественное их использование.
styles.css - часть 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;
}
Во второй части кода мы придаем стиль анимированным закругленным div, которые появляются при наведении мышки. Мы используем свойство CSS3 border-radius и придаем ему значение 100 пикселей. Таким образом мы превращаем наши div в идеальные круги. Мы также позиционируем каждый из 4-х div немного за пределами div родителя.
Шаг 3 - PHP
В разделе про PHP мы прежде всего взглянем на созданный класс для баннера.
baneer.class.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>';
}
}
Метод конструктора класса выполняется при создании нового объекта баннера. Он копирует переменную $row во внутренний массив $data.
Другой метод - html() - выдает HTML код баннера.
Вы можете увидеть ниже как этот класс и его методы используются.
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);
После выбора всех баннеров из БД, PHP проходит по каждому ряду полученного асоциативного массива и создает объект баннера. После этого полученный массив $banners перемешивается и разделяется с помощью специальной встроенной функции array_chunk()
Поскольку у нас 8 баннеров, мы получаем 2 элемента в $bannerGroups, которые можно вывести на страницу.
demo.php
<ul class="bannerHolder">
<?php
// Looping through the first group:
foreach($bannerGroups[0] as $ban)
{
echo '<li>'.$ban->html().'</li>';
}
?>
</ul>
Теперь можем переходить на часть про jQuery.
Шаг 4 - jQuery
После подключения библиотеки jQuery к странице, мы можем начать писать наш JavaScript в script.js.
script.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'));
});
});
Используя метод hover мы привязываем две функции к mouseenter и mouseleave событиям. Эти события показывают и прячет четыре закругленных угла и абзац с текстом.
Обратите внимание на использование функции stop(), которая останавливает выполнение анимации. Помните, если Вам необходимо остановить встроенный эффект, такой как fadeOut(), Вам необходимо передать два дополнительных параметра true функции.
Остановка анимации очень важна, так как начало новой анимации при незавершенной текущей анимации, ни к чему хорошему не приведет.
В конце, так как ссылка спрятана под div и на нее нельзя нажать, нам необходимо следить за событием click на главном div баннера, и когда событие происходит необходимо открывать новое окно с правильным URL.
Теперь у нас все готово.
Заключение
В этом уроке мы продемонстрировали некоторый полезные свойства PHP, jQuery и CSS. Можете использовать и подстраивать под свои нужды.