Эффекты на основе Java Script

Вернуться в каталог >>>

Эффектно появляющееся описание или подсказка к картинке(2-й вариант)

Cycliner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Banana Moon

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

BlueBuck

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

SOSO

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Buzzsprout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sweetcakes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Paperbox

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Alessandro

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Trento Media

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<SCRIPT src="http://skriptkpbstudio.ucoz.ru/jq_baza/jquery-1.3.2.js"></SCRIPT>
<SCRIPT>
$(document).ready(function() {
    //move the image in pixel (определяет направление и величину смещения картинки)
	var move = -150;          // если задать (150) будет исчезать вниз-вправо, если (-15) - просто увеличиваться(при этом скорость лучше сделать по 200)
	//zoom percentage, 1.2 =120% (коэффициент увеличения-уменьшения картинки при движении)
	var zoom = 1.2;
    //On mouse over those thumbnail  (исчезновение картинки - появление описания)
	$('.item').hover(function() {
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		//Move and zoom the image   (скорость исчезновения картинки)
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:700});
		//Display the caption   (скорость проявления текстовых пояснений)
		$(this).find('div.caption').stop(false,true).fadeIn(1500);
	},
	// востановление картинки - исчезновение описания
	function() {
		//Reset the image   (скорость появления картинки)
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	
        //Hide the caption  (скорость растворения текстовыж пояснений)
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
});
</SCRIPT>
<STYLE>
/* стиль картинок */
.item {BORDER-RIGHT: #222 4px solid; BORDER-TOP: #222 4px solid; FLOAT: left; MARGIN: 5px 5px 5px 0px; OVERFLOW: hidden; BORDER-LEFT: #222 4px solid; WIDTH: 125px; BORDER-BOTTOM: #222 4px solid; POSITION: relative; HEIGHT: 125px}
/* стиль и параметры пояснений*/
.item .caption {DISPLAY: none; FONT-WEIGHT: bold; BACKGROUND: #000; FILTER: alpha(opacity=80); LEFT: 0px; WIDTH: 125px; COLOR: #fff; POSITION: absolute; HEIGHT: 125px; moz-opacity: 0.8; khtml-opacity: 0.8; opacity: 0.8}
.item .caption A {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; FONT-SIZE: 16px; PADDING-BOTTOM: 5px; COLOR: #0cc7dd; PADDING-TOP: 5px; TEXT-DECORATION: none}
.item .caption P {FONT-FAMILY: arial; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 10px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px}
IMG {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; BORDER-RIGHT-WIDTH: 0px}
.clear {CLEAR: both}
</STYLE>

Впринципе всё подписано. При наведении курсора на картинку она исчезает с заданным эффектом(эффекты можно задавать разные, смотри пояснения к скрипту) и появляется текст описания или то что Вам нужно. Возможно как групповое размещение картинок, например ввиде галереи пиктограмм(верхний блок картинок) так и произвольное одиночное расположение картинок(2-е нижние).

Внутри тега <BODY> - </BODY> там где у Вас будут картинки
(привожу для галереи по 3-и в ряд).

<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=Cycliner src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/1.gif" width=125></A> 
<DIV class=caption><A 
href="http://skriptkpbstudio.ucoz.ru" target=_blank>Cycliner</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt="Banana Moon" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/2.gif" width=125></A> 
<DIV class=caption><A 
href="http://webkpb.ucoz.ru/" target=_blank>Banana Moon</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=BlueBuck src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/3.gif" width=125></A> 
<DIV class=caption><A 
href="http://kpbwebstudio.narod.ru/" target=_blank>BlueBuck</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=clear></DIV> 
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=SOSO src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/4.gif" width=125></A> 
<DIV class=caption><A 
href="http://kpbwebstudio.narod.ru/" target=_blank>SOSO</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=Buzzsprout src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/5.gif" width=125></A> 
<DIV class=caption><A 
href="http://skriptkpbstudio.ucoz.ru/" target=_blank>Buzzsprout</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=Sweetcakes src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/6.gif" width=125></A> 
<DIV class=caption><A 
href="http://webkpb.ucoz.ru/" target=_blank>Sweetcakes</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=clear></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=Paperbox src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/7.gif" width=125></A> 
<DIV class=caption><A 
href="http://webkpb.ucoz.ru/" target=_blank>Paperbox</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt=Alessandro src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/8.gif" width=125></A> 
<DIV class=caption><A 
href="http://kpbwebstudio.narod.ru/" target=_blank>Alessandro</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=item><A 
href="#"><IMG title="" 
height=125 alt="Trento Media" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/1076/img/9.gif" width=125></A> 
<DIV class=caption><A 
href="http://skriptkpbstudio.ucoz.ru/" target=_blank>Trento Media</A> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</P></DIV></DIV>
<DIV class=clear></DIV>

Впринципе всё должно быть понятно, задаём адреса картинок, текст пояснений и если в пояснении есть ссылки то их названия и адресса переходов. То что по 3-и в ряд задаёт DIV с классом "clear". Вы можете задать свои стили оформления картинок и подсказок, и параметры картинок и скрипта. Еще один вариант использования эффекта смены информации можно посмотреть здесь.

WebKPB

Большая коллекция Flash всевозможных назначений. Изготовление Flash на заказ.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.

SkriptKPBstudio

Огромная бесплатная коллекция JavaScript, jQuery, HTML&CSS эффектов в примерах.