Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2011, 15:47
a_c a_c вне форума
Новичок на форуме
Отправить личное сообщение для a_c Посмотреть профиль Найти все сообщения от a_c
 
Регистрация: 08.04.2011
Сообщений: 4

Анимированные кнопки с помощью jQuery
Здравствуйте!

Подскажите пожалуйста, есть ли примеры анимированных кнопок, реализованных с помощью jQuery. Интересует анимация - примерно как на этом сайте, реализованная с помощью Flash

http://cms.template-help.com/magento_28513
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2011, 16:46
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Битая ссылка.
Но не глядя скажу что можно. Давай нормальную ссылку, напишу сегодня пример и отправлю)
__________________
XYZ
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2011, 20:23
a_c a_c вне форума
Новичок на форуме
Отправить личное сообщение для a_c Посмотреть профиль Найти все сообщения от a_c
 
Регистрация: 08.04.2011
Сообщений: 4

Огромное Спасибо за Ответ!!!

Странно, но ссылка у меня открылась, есть и другая с таким же примером:

http://www.templatehelp.com/preset/p...V Xk8QZ8Kb403

а вот первоначальная, но у меня она открылась

http://cms.template-help.com/magento_28513/
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2011, 23:00
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Первое и важное, я не в курсе как подгружать звук на jquery. Если найду , то воспользуюсь. А сейчас оглашу алгоритм работы данного плагина , после приступлю к реализации подобного примера. Итак первое что заметил: есть два события, наведение и отвод курсора с обьекта (картинка в данном случае или что вероятнее ссылка с фоновым изображением). Вообще два события. При наведении появляется темный прямоугольник и увеличивается на весь размер картинки , плюс само изображение увеличивается процентов на 10 и сразу уменьшается то базового значения, все это одновременно.плюс в нижней части появляется теск , эффект слайдшоу, и подобие аккордиона в веркней части. Ориентировочно данный пример потребует ресурсов нескольких библиотек, но все же реализуемо . При отводе курсора происходит все в обратном порядке, возможно как то все завязано на toggle, Постараюсь до конца субботы написать вариант, функциональный)
__________________
XYZ
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2011, 23:20
a_c a_c вне форума
Новичок на форуме
Отправить личное сообщение для a_c Посмотреть профиль Найти все сообщения от a_c
 
Регистрация: 08.04.2011
Сообщений: 4

Да-да, по алгоритму - все так. К тому же не требуется полной идентичности примеру на флеш. Без звука - будет так же хорошо.
Я, если честно, пхп-кодер и jQuery использую некоторые основы и библиотеки, и думал, что есть готовый пример или библиотека. Поэтому - буду очень Рад и Признателен Вашему решению, к тому же, как я думаю, такой пример поможет многим.
Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2011, 11:51
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Ок, вот как раз сейчас занялся реализацией!
__________________
XYZ
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2011, 15:34
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function () {
$("#block").click(function(){
	zoom();
     
		setTimeout('	zoom2();', 1300)
		
    });
	
	})
function zoom(){
	 $("#block").animate({
        width: "300px",
		height:"300px",
        opacity: 0.3,
        left: 100/2*(-1),
		top: 100/2*(-1) 
        }, 1300 );
		$('#ptext').slideDown(1300);
		$('#ptext2').toggle(1300);}
function zoom2(){
	 $("#block").animate({
        width: "200px",
		height:"200px",
        opacity: 1.0,
        left: 0,
		top:0  
        }, 1300 );
		//$('#ptext').slideUp(1300);
//		$('#ptext2').toggle(1300);
		}
	</script>


<style type="text/css">
	body {color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
		
		.basic  { 
		width:200px;
		height:200px;
			float:left; 
			position:relative; 
			overflow:hidden; 
		}
		.basic a img { 
			width:200px; 
			position:relative; 
			border:none; 
		}
		
		.clear { clear:both; } 
		.ptext{
			height:35px;
			position:absolute; 
			top:-13px; 
			left:0px;
			width:100%; 
			display:none; 
			
			background:#0c4b62;
			color:white;
			opacity:0.9;
		}
		.ptext2{
			height:35px;
			position:absolute; 
			bottom:-13px; 
			left:0px; 
			width:100%; 
			display:none; 
			
			background:#0c4b62;
			color:white;
			opacity:0.9;
		}
		.ptext .ptextInside{
			
			padding:0px;
			margin:0px;
		}div {
	position: absolute;
	background-color: #abc;
	left: 4px;
	top:30px;
	width: 60px;
	height: 60px;
	
  }
</style>
</head>

<body>
<div class="basic">
<a href="#"><img id="block"src="images/15.jpg" width="200" height="200" /> </a>
<p class="ptext" id="ptext">CofeeNerd</p>
<p class="ptext2" id="ptext2">CofeeNerd</p>
</div>

</body>
</html>


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

Короче говоря к этим частям нужно применять какой нить плагин slider.
В общем работает по клику, думаю что заменить что то не составит труда, например срабатываение при наведении или еще что.

1. Зум есть
2. Можно сделать появление обьекта в верху и внизу с помощью моей писанины , а потом применить к ним плагин с эффектом слайдера.Таких масса.

Если будут вопросы,пишите.
__________________
XYZ
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2011, 15:41
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Наверное даже лучше делать дивы с слайдерами которые будут появляться верхний через hide, нижний как слайдер первое изображение которого прозрачное.
__________________
XYZ
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2011, 15:49
a_c a_c вне форума
Новичок на форуме
Отправить личное сообщение для a_c Посмотреть профиль Найти все сообщения от a_c
 
Регистрация: 08.04.2011
Сообщений: 4

Окей! Огромное Спасибо!!! Буду пробовать!!!
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2011, 18:55
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Если что, пиши, мне самому до ума захотелось что т одовести, но только если кому то от это го будет прок!
__________________
XYZ
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью JQuery проверить длину введенного сообщения? Bandicoot jQuery 1 13.03.2011 14:12
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 22:59
Jquery UI Sortable, автоматическая сортировка объектов по нажатию кнопки. Professor jQuery 5 11.11.2010 16:17
Как скруглить углы у картинки с помощью JQuery askel jQuery 5 08.05.2010 22:33
Авторизация в модальном окне с помощью jQuery A.N.R.I jQuery 17 01.03.2010 19:26