Вед-дев, Сео, Манимейкинг

Скользящие блоки при помощи jQuery

Шаг 1. Создайте таблицу стилей CSS, вставьте в неё код расположенный ниже и переименуйте как style.

*{ padding:0px; margin:0px; }

body{ background:#D5DEE7; }

a{ color:#C8DCE5; }

h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}

.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}

.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}

.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
}

/* For IE 5-7 */

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

/* For IE 8 */

-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

.captionfull .boxcaption {
top: 260;
left: 0;
}

.caption .boxcaption {
top: 220;
left: 0;
}

Шаг 2. Вставьте между тегами следующий код:

Он позволит вам подключить небавно созданную таблицу стилей style.css и библиотеку jquery. Файл jquery.js вы сможете найти в исходниках данного урока.

Шаг 3. Сражу же после вышеописанного кода вставьте этот скрипт:

<script type="text/javascript">
$(document).ready(function(){

//To switch directions up/down and left/right just place a "-" in front of the top/left attribute

//Vertical Sliding

$('.boxgrid.slidedown').hover(function(){

$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});

}, function() {

$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});

});

//Horizontal Sliding

$('.boxgrid.slideright').hover(function(){

$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});

}, function() {

$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});

});

//Diagnal Sliding

$('.boxgrid.thecombo').hover(function(){

$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});

}, function() {

$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});

});

//Partial Sliding (Only show some of background)

$('.boxgrid.peek').hover(function(){

$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});

}, function() {

$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});

});

//Full Caption Sliding (Hidden to Visible)

$('.boxgrid.captionfull').hover(function(){

$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});

}, function() {

$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});

});

//Caption Sliding (Partially Hidden to Visible)

$('.boxgrid.caption').hover(function(){

$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});

}, function() {

$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});

});

});

</script>

Данный скрипт позволяет выдвигать блоки и надписи 6-ти различными способами. Использование все одновременно не обязательно, вы можете оставить только тот который вам больше всего понравился.

Шаг 4. Теперь когда уже подготовлено, пора выводить изображение с выезжающим блоком. Ниже расположены шесть вариантов исполнения, вставьте код понравившегося вам варианта между тегами.

Вариант 1: Полное выдвижение надписи (надпись изначально скрыта) (Full Caption Sliding (Hidden to Visible))

<div class="boxgrid captionfull">

<img src="img/jareck.jpg"/>

<div class="cover boxcaption">

<h3>Название</h3>

<p>описание<br/><a href="#">Здесь ваша ссылка</a></p>

</div>

</div>

Вариант 2: Полное выдвижение надиси (изначально часть надписи видна)(Caption Sliding (Partially Hidden to Visible))

<div class="boxgrid caption">

<img src="img/kamil.jpg"/>

<div class="cover boxcaption">

<h3>Название</h3>

<p>Описание<br/><a href="#">Здесь ваша ссылка</a></p>

</div>

</div>

Вариант 3. Горизонтальное скольжение (Horizontal Sliding). При наведении мышки на изображение, оно уезжает вправо, и остаётся лишь надпись на фоновом цвете.

<div class="boxgrid slideright">

<img class="cover" src="img/martin.jpg"/>

<h3>Название</h3>

<p>Описание<br/><a href="#">Здесь ваша ссылка</a></p>

</div>

Вариант 4. Диагональное скольжение (Diagnal Sliding). При наведении мышки на изображение, оно уезжает по диагонали вправо, и остаётся лишь надпись на фоновом цвете.

<div class="boxgrid thecombo">

<img class="cover" src="img/florian.jpg"/>

<h3>Название</h3>

<p>Описание<br/><a href="#">Здесь ваша ссылка</a></p>

</div>

Вариант 5. Вертикальное скольжение (Vertical Sliding). При наведении мышки на изображение, оно уезжает вверх, и остаётся лишь надпись на фоновом цвете.

<div class="boxgrid slidedown">

<img class="cover" src="img/nonsense.jpg"/>

<h3>Название</h3>

<p>Описание<br/><a href="#">Здесь ваша ссылка</a></p>

</div>

Вариант 6. Частичное скольжение Partial Sliding (Only show some of background). При наведении мышки фоновое изображение опускается вниз на заданную величину, а на освободившемся пространстве появляется выбранное вами изображение.

<div class="boxgrid peek">

<a href="http://webmoments.ru/rss.php" target="_BLANK"><img src="birss.jpg"/></a>

<a href="http://webmoments.ru/view.php?rub=3&id=13" target="_BLANK"><img class="cover"
src="buildinternet.jpg"/></a>

</div>


Комментарии (0)

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 1 год 2 недели назад
    Спасибо. С Новым Годом! 
  • Den 1 год 1 месяц назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 1 год 1 месяц назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 1 год 2 месяца назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 1 год 2 месяца назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 1 год 2 месяца назад
    захожу на mysql через ssh по команде  
  • admin 1 год 2 месяца назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 1 год 2 месяца назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 2 месяца назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 4 месяца назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!