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

Posted Sun, 12/05/2010 - 21:59

Шаг 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>

AttachmentSize
slidingboxes.rar149.75 KB