Эффект фото ленты 2 (разбор HR_PhotoLine.js) продолжение
Продолжим разбор остальных методов объекта HelpeR.
Следующий метод это lenta. Он отвечает за создание ленты с фото и их описаниями а так же за подключение эффекта HR_Blackout к фотографиям ленты.
Сначала создается сама лента это элемент div. Далее устанавливаются все его свойства.
this.lenta_DIV = document.createElement('div');
this.lenta_DIV.setAttribute('id','HR_lenta_DIV');
var i,c,z,pic_len = this.pics_array.length;
this.lenta_DIV.style.overflow = 'hidden';
this.lenta_DIV.style.width = (this.lenta_pics * parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * this.lenta_pics * 2 + 2) + 'px';
Помните про свойство overflow и ширину ленты, про которые я описывал в html версии фото ленты.
Далее в цикле создаются рисунки которые имею ссылки на большой вариант с массива ln_big_photos, а внутри объекта это массив this.pics_big_array.
Обратите внимание, что при создании ряда фотографий, учитывается сколько фото должно быть в ленте (свойство this.lenta_pics), как только количество достигает этой цифры, остальные фото получают значение margin-right с минусовым показателем, что бы фото ушло за ленту и ее не было видно. После проверяется подключен ли эффект HR_Blackout если да, то ссылка получает класс HR (это требуется для этого эффекта). И в конце цикла в ссылку вставляется рисунок как дочерний узел, а замет уже ссылка вставляется в див ленты. После полного окончания проверяется если включен эффект HR_Blackout, то он подгружаются и под конец весь этот див вставляется в центральную ячейку таблицы.
for(z=0; z < pic_len; z++) {
(img = new Image()).src = this.pic_dir + this.pics_array[z];
for(var c in this.pic_params) {
eval("img.style." + c + " = '" + this.pic_params[c] + "';");
}
if(z > this.lenta_pics - 1) {
img.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
}
var ahref = document.createElement('a');
ahref.setAttribute('title',this.pics_title[z]);
ahref.setAttribute('target','_blank');
ahref.href = this.pic_dir + this.pics_big_array[z];
/* HR Blackout */
if(this.HR_Blackout) {
ahref.className = 'HR';
}
/* HR Blackout */
ahref.appendChild(img);
this.lenta_DIV.appendChild(ahref);
}
if(this.HR_Blackout) {
document.write("<script language='javascript' src='" + this.HR_Blackout_src + "'><\/script>");
}
document.getElementById('HR_lenta_table').rows[0].cells[1].appendChild(this.lenta_DIV);
И в конце таким же образом создается див с описаниями фото. Каждое описание обрамляется дивом который получает свойства из объекта this.desc_params. Помните про свойство float для браузеров Mozilla и IE. И этот див тоже вставляется в центральную ячейку таблицы.
Теперь перейдем к разбору метода next и previous.
Next
Метод next начинается с проверки возможен ли еще клик по левой стрелки, т.е. имеются ли еще фото в ленте для прокрутки. Имеется переменная, которая изначально равна нулю this.pic_pos = 0; b и к ней прибавляется число которое должно присутствовать в ленте и это число должно быть меньше или равно числу всех имеющихся рисунков в ленте. Далее значение href ссылки присваивается пустота, что бы не возникали глюки если пользовательно начнет сто раз автоматной очередью кликать по стрелочке. Далее увеличение this.pic_pos происходит в методе move, т.к. это требуется вот для этой строки this.last_pic = this.pic_pos + this.lenta_pics; Здесь определяется тот рисунок, который должен появиться с правой стороны ленты. Далее определяется массив с рисунками которые существую в ленте и массив с описаниями рисунков для использования в методе move. И под конец вызывается сам метод move с аргументом left. И тоже самое касательно метода previous, только в ней идет все наоборот.
next : function() {
if(this.pic_pos + this.lenta_pics <= this.pics_array.length - 1) {
document.getElementById('HR_link_left').href = 'javascript:;';
document.getElementById('HR_link_right').href = 'javascript:;';
this.last_pic = this.pic_pos + this.lenta_pics;
this.lenta_imgs = document.getElementById('HR_lenta_DIV').getElementsByTagName('img');
this.titles = document.getElementById('HR_desc_DIV').getElementsByTagName('div');
this.timer = setTimeout("HR_lenta.move('left');", 1);
}
},
previous : function() {
if(this.pic_pos > 0) {
document.getElementById('HR_link_left').href = 'javascript:;';
document.getElementById('HR_link_right').href = 'javascript:;';
this.pic_pos--;
this.last_pic = this.pic_pos + this.lenta_pics;
this.lenta_imgs = document.getElementById('HR_lenta_DIV').getElementsByTagName('img');
this.timer = setTimeout("HR_lenta.move('right');", 1);
}
},
А теперь перейдем к рассмотрению метода move. В первую очередь функция получает аргумент, который указывает в которую сторону должно происходить пролистывание. Затем для удобства я создал ссылки с короткими названиями для массивов. После проверяется которое направление задано аргументом и начинается увеличение margin'ов рисунков и описаний. Увеличение или уменьшение происходит со значением переменной this.step, которую определяет пользователь. Для эффекта движения функция вызывает сама себя до тех пор то пока рисунки не достигнут нужной позиции, а после таймер останавливается.
move : function(dir) {
var first_pic = this.lenta_imgs[this.pic_pos];
var last_pic = this.lenta_imgs[this.last_pic];
var first_title = this.titles[this.pic_pos];
var last_title = this.titles[this.last_pic];
if(dir == 'left') {
if(this.lenta_imgs[this.pic_pos].style.marginLeft) {
first_pic.style.marginLeft = (parseInt(first_pic.style.marginLeft) - this.step) + 'px';
last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) + this.step) + 'px';
first_title.style.marginLeft = (parseInt(first_title.style.marginLeft) - this.step) + 'px';
last_title.style.marginRight = (parseInt(last_title.style.marginRight) + this.step) + 'px';
if(Math.abs(parseInt(first_pic.style.marginLeft)) >= (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2)) {
first_pic.style.marginLeft = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
last_pic.style.marginRight = '0px';
first_title.style.marginLeft = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
last_title.style.marginRight = '0px';
clearTimeout(this.timer);
this.pic_pos++;
document.getElementById('HR_link_left').href = 'javascript:HR_lenta.next();';
document.getElementById('HR_link_right').href = 'javascript:HR_lenta.previous();';
}
else {
this.timer = setTimeout("HR_lenta.move('left')", this.speed);
}
}
else {
first_pic.style.marginLeft = '-' + (this.step) + 'px';
last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) + this.step) + 'px';
first_title.style.marginLeft = '-' + (this.step) + 'px';
last_title.style.marginRight = (parseInt(last_title.style.marginRight) + this.step) + 'px';
this.timer = setTimeout("HR_lenta.move('left')", this.speed);
}
}
else if(dir == 'right') {
if(last_pic.style.marginRight) {
first_pic.style.marginLeft = (parseInt(first_pic.style.marginLeft) + this.step) + 'px';
last_pic.style.marginRight = (parseInt(last_pic.style.marginRight) - this.step) + 'px';
first_title.style.marginLeft = (parseInt(first_title.style.marginLeft) + this.step) + 'px';
last_title.style.marginRight = (parseInt(last_pic.style.marginRight) - this.step) + 'px';
if(Math.abs(parseInt(last_pic.style.marginRight)) >= (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2)) {
first_pic.style.marginLeft = '0px';
last_pic.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
first_title.style.marginLeft = '0px';
last_title.style.marginRight = '-' + (parseInt(this.pic_params['width']) + parseInt(this.pic_params['padding']) * 2) + 'px';
clearTimeout(this.timer);
document.getElementById('HR_link_left').href = 'javascript:HR_lenta.next();';
document.getElementById('HR_link_right').href = 'javascript:HR_lenta.previous();';
}
else {
this.timer = setTimeout("HR_lenta.move('right')", this.speed);
}
}
}
else {
alert("Ошибка!\nДиректория не определена!");
}
}
Финал. Для старта всего того, что мы создали нам следует объявить объект HelpeR, далее при успешном создании самой таблицы вызвать создание ленты и эффект готов!
var HR_lenta = new HelpeR();
if(HR_lenta.table()) {
HR_lenta.lenta();
}
Надеюсь, что эффект окажется полезным для вас. И если вы его решите использовать, всегда буду рад вашим отзывам!
|
