Информация о материале

Категория: jQuery

Опубликовано: 24 марта 2013

Просмотров: 10990

• jquery
• slider
• эффекты
• баннер
• анимация на jquery
• велосипед

Часто возникает задача: «на коленке» сделать анимированный баннер используя лишь несколько изображений с эффектами перехода. Да, есть Adobe Flash, есть GIF анимация, но бывают случаи, когда маркетолог скинул тебе пару скудных jpg макетов, и попросил - «что-нибудь с ними сделать». 

Софт-программисты ищут, в таких случаях, нужный jquery плагин. Благо, их обилие позволяет легко найти подходящий. Но это не всегда оправданно, так как сама jQuery имеет отличные средства анимации и эффектов. И код для этого, будет не более 20-ти строк, в зависимости от того, какое количество эффектов Вам потребуется.

В этой статье я опишу, как сделать небольшой анимированный баннер на jquery, без использования сторонних плагинов.

В результате мы получим такой баннер:

Информация о материале

Категория: jQuery

Опубликовано: 15 февраля 2013

Просмотров: 9278

• jquery
• пагинация
• scroll
• scrolltop
• end
• scrollend

В контакте есть такая фича: прокручиваешь новости до конца страницы, после этого автоматически подгружаются другие новости. Это весьма удобно, не нужно организовывать сложную систему пагинации. Просто крутишь страницу. Сделать такое на jquery не составит труда. Для этого используем событие scroll. Создадим элемент.

<div id="mynews" style="height:100px;overflow-y:scroll;"></div>

к нему прицепляем обработчик события

var page = 1;
$('#mynews').scroll(function() {
	if( $(this).height() + $(this).scrollTop() >= this.scrollHeight ) {
		$('#mynews').append($.get('news.php?page='+page++));
	}
});

а вот и демонстрация работы:

Информация о материале

Категория: jQuery

Опубликовано: 19 сентября 2012

Просмотров: 20083

• jquery
• parent
• parents
• closest
• получить n родителя
• eq

Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

В jquery есть несколько способов получения родителей элементов :parent, parents, closest

parent - возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.

Информация о материале

Категория: jQuery

Опубликовано: 03 сентября 2012

Просмотров: 3729

Вопреки названию статьи скажу, что анимации на jQuery здесь по минимуму. Фактически для браузеров Firefox и Google Chrome ее и вовсе нет. На выходе у вас должен получиться вот такая симпатичная  слайдер-галлерея

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

Первое, что мне пришло в голову это абсолютно перемещать все блоки по оси x(меняя свойство style.left), как только крайний достигает границы слайдера, просто перемещать первые слайды в конец и продолжать общую анимацию. Все просто, и возможно читатель, который прочтет данный пост в недалеком будущем сделает именно так, однако на данный момент ни один браузер не показал достойную анимацию изображения, а слайдер который прокручивает изображение рывками думаю мало кого интересует.

Вариант номер два, клонировать с помощью jQuery.clone содержимое одного блока с фотографиями, и добавлять вконце первого. Прокручивание целого блока работает заметно быстрее, однако все равно это очень медленное мероприятие.

Вариант номер три, тоже а намеком на будущее, использование CSS3. В CSS3 есть такие фишки, которые при грамотной реализации браузерами позволят делать совершенно не тормозящую анимацию. Это возможно и сейчас, но только не в IE. Я не знаю, что там в IE10, но на данный момент IE9 эту штуку не поддерживает, но вот сама идея очень интересна. Нашел я ее тут http://css-tricks.com/infinite-all-css-scrolling-slideshow/  

Собственно, само ТЗ изложенное выше, тут не выполняется, хотя слайдер и получился очень милым. 

Как и в статье перемещать все картинки по отдельности мы не станем, это слишком накладно и на моем не самом последнем ноутбуке прилично тормозит. Мы пойдем другим путем. Закинем все фото при помощи php в один файл, а затем со спокойной душой будем двигать этот файлик, как background.

Для начала функция для перебора всех изображений находящихся в категории:

function Perebor( $path ){
	if(  file_exists( $path ) ){
		$Handler = glob ($path . '*.jpg');
		foreach ($Handler as $Photo){
			//обработаем все фото
		}
	}
}