Эффект фото ленты « JavaScript, jQuery, Ajax, PHP, Веб дизайн

RSS

Эффект фото ленты

31 Июл

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

Ленту я составил из таблицы (<div> применять не пришлось).

Лента состоит из 3 рисунков (количество рисунков можно регулировать по желанию) и двух боковых стрелок, при клике на которые будет выполняться перелистывания ленты. Сам процесс перелистывания сделал следующим образом.

<tbody>

<tr>

</tr>

</tbody>

</table>

В первую очередь, рисунок самой крайней ячейки убирается (display=’none’), далее запускается функция setInterval(), которая в процентном соотношении (для достижения плавного эффекта сужения), начинает сужать эту ячейку. И когда ширина ячейки доходит до 1 пикселя, она удаляется и заменяется, созданной, новой ячейкой, только уже с противоположной стороны ленты. Дальше запускается следующая функция setInterval(), которая начинает расширять новую ячейку до размера остальных ячеек. Когда достигается определенная ширина, создается рисунок и вставляется в эту ячейку.

Я постарался словами описать сам процесс движения фото-ленты. Вот и сам скрипт:

<!–

var c=2;

var timer;

var timer2;

var src;

// ссылка на таблицу (ленту)

var table=document.getElementById(«effectTable»);

// массив с путями к рисункам которые содержаться в ленте

var picId=new Array(«1.jpg»,«2.jpg»,«3.jpg»,«4.jpg»,«5.jpg»,«6.jpg»,«7.jpg»);

// создается объект attributes, который содержит параметры нового рисунка

var attributes={src:picId,width:100,height:75,border: 0};

// функция для клика в левую сторону

function next() {

// если счетчик c не достиг последнего рисунка в ленте

if(c < (picId.length-1)) {

// обращение к таблица.первый_ряд.первый_столбец.первый_дочерний_узел, который является рисунком и скрывается. Обратите внимание, что счет ряда начинается с 0, а столбцом с 1

table.rows[ 0].cells[1].firstChild.style.display=«none»;

c+=1; // увеличивается счетчик

// перезаписываются элементы объекта attributes, главное здесь новый путь к рисунку

attributes={src:picId,width:100,height:75,border: 0};

// переменной src с глобальной видимостью присваивается новое значение

src=picId;

// запускается таймер для уменьшения ширины ячейки

timer=setInterval(«cellNarrowing(1,3,1,3)», 5);

}

// анологично функции next рабоатет функция previous только в обратном направлении

function previous() {

if(c > 2) {

table.rows[ 0].cells[3].firstChild.style.display=«none»;

attributes={src:picId,width:100,height:75,border: 0};

src=picId;

c-=1;

timer=setInterval(«cellNarrowing(3,1,3,1)», 5);

}

// функция для сужения ячейки

function cellNarrowing(cellIndex,cellAddIndex,cellDeleteIndex,stretchCellParam) {

// переменной cell приравнивается ссылка на ячеку, которую нужно сузить

var cell=table.rows[ 0].cells[cellIndex];

// переменной cellWidth приравнивается ширина СУЖАЮЩЕЙСЯ ячейки

var cellWidth=parseInt(cell.style.width);

// если ширина ячейки достигла 2 или 1

if(parseInt(cell.style.width)<=2) {

// останавливаем таймер

clearInterval(timer);

// устанавливает ширину ячейки раной еденице

cell.style.width=«1px»;

// удаляем сузевшуюся ячейку

table.rows[ 0].deleteCell(cellDeleteIndex);

// добавляем новую ячейку. Создаем новый элемент документа <а>, всавляем его в эту ячеку и придаем ячейке иширину равной 1

table.rows[ 0].insertCell(cellAddIndex);

var newLink=document.createElement(«a»);

var bigImgIndex=src.lastIndexOf(«.»);

var bigImg=src.substring( 0,bigImgIndex)+«b.jpg»;

newLink.setAttribute(«href»,«javascript:winOpen(«»+bigImg+»")»);

table.rows[ 0].cells[cellAddIndex].appendChild(newLink);

table.rows[ 0].cells[cellAddIndex].style.width=«1px»;

table.rows[ 0].cells[cellAddIndex].style.textAlign=«center»;

// и наконец запускаем функцию которая растягивает новую ячейку до определенной ширины

timer2=setInterval(«stretchCell(«+stretchCellParam+«)»,5);

}

else {

// если же ячейка еще не сузилась, то В ПРОЦЕНТОМ соотношении сужаем ее. Обратите внимание умножаем на 60. Не думайте, что результат останется тем же, нет он уменьшится ;)

cell.style.width=Math.round(cellWidth*60/100)+«px»;

}

function winOpen(img) {

var nw = window.open(img,«newWindow»,«width=500, height=375, menubar=no, resizable=no, status=no, titlebar=no, toolbar=no»);

nw.focus();

}

// функция расширения новой ячейки

function stretchCell(cellIndex) {

// ссылка на новую ячейку

var cell=table.rows[ 0].cells[cellIndex];

// ширина новой ячейки

var cellWidth=parseInt(cell.style.width);

// в этот раз уже увеличиваем в процентом соотношении, уже умножаем на 210

cell.style.width=Math.round(cellWidth*210/100)+«px»;

// если ширина достигнута созадется новый рисунок к которому привызываются все параметры из объекта attributes (объект имеет глобальную видимость)

if(parseInt(cell.style.width)>=144) {

clearInterval(timer2);

table.rows[ 0].cells[cellIndex].style.width=«144px»;

var newElement=document.createElement(«img»);

for(i in attributes) {

newElement.setAttribute(i, attributes[i]);

}

// и наконец в новую ячейку вставляется новый рисунок

cell.firstChild.appendChild(newElement);

}

//–>

</script>

P.S. регулируя процентные цифры 60 и 210 вы будете регулировать скорость прокрутки.

1 Comment

Posted in JavaScript

Теги: JavaScript, фото-лента

Оставить комментарий

Lexa

16.10.2009 at 03:06

Спасибо за скриптик)
Java рулез

Блог студии Фузайлова

Эффект фото ленты

Оставить комментарий

Искать

Рубрики

Архивы

Свежие записи

Свежие комментарии

Статистика