Первая копия
This commit is contained in:
212
metadata/dbms/TCGallery.js
Normal file
212
metadata/dbms/TCGallery.js
Normal file
@ -0,0 +1,212 @@
|
||||
|
||||
//Галерея изображений на первой странице сайта
|
||||
function TCGallery(parent)
|
||||
{
|
||||
this.work = function()
|
||||
{
|
||||
if(this.mas[0].style.opacity > 0.05)
|
||||
{
|
||||
this.mas[0].style.opacity = this.mas[0].style.opacity - 0.05;
|
||||
this.timeout_id=setTimeout(function(thiz){return function(){thiz.work();}}(this),50);
|
||||
|
||||
this.test++;
|
||||
//console.info(this.test+' 50 '+this.mas[0].style.opacity);
|
||||
}else
|
||||
{
|
||||
//Перестовляем Z индексы первый на последнее место (больший наверху)
|
||||
if(this.mas.length>0)
|
||||
{
|
||||
var z=this.mas[this.mas.length-1].style.zIndex;
|
||||
for(var i=this.mas.length-1;i>0;i--)
|
||||
{
|
||||
this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
|
||||
}
|
||||
this.mas[0].style.zIndex=z;
|
||||
}
|
||||
|
||||
//Поменяли местами востанавливаем прозрачность
|
||||
for(var i=0;i<this.mas.length;i++)
|
||||
{ this.mas[i].style.opacity = 1;
|
||||
}
|
||||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;}); //Сортируем с макс Z индексом наверху в 0ле
|
||||
this.timeout_id=setTimeout(function(thiz){return function(){thiz.work();}}(this),5000); //Перезапускаем таймер через 10 секунд с максимальным Z индексом
|
||||
|
||||
this.selected();
|
||||
|
||||
this.test++;
|
||||
//console.info(this.test+' 5000 '+this.mas[0].style.opacity);
|
||||
}
|
||||
};
|
||||
//Стартуем галерею
|
||||
this.Start = function()
|
||||
{
|
||||
var maxz=0;
|
||||
for(var i=0;i<this.mas.length;i++)
|
||||
{ this.mas[i].style.opacity = 1;
|
||||
if(maxz<this.mas[i].style.zIndex) maxz=this.mas[i].style.zIndex;
|
||||
}
|
||||
if(this.mas.length>0)
|
||||
setTimeout(function(thiz){return function(){thiz.work();}}(this),5000);
|
||||
maxz++;
|
||||
|
||||
//Кнопочки для переключения картинок
|
||||
var cdv=document.createElement('div');
|
||||
cdv.style.cssText='opacity: 0.7; display: block; position: absolute; bottom: 5px; right: 5px; z-index: '+maxz+'; border: solid 0px red;';
|
||||
for(var i=0;i<this.mas.length;i++)
|
||||
{
|
||||
var btn=document.createElement('div');
|
||||
btn.style.cssText='cursor: pointer; background-color: #eeeeee; text-align: center; display: inline-block; margin: 2px; border: solid 1px black; width: 17px;';
|
||||
btn.appendChild(document.createTextNode(i+1));
|
||||
btn.onclick = function(thiz,i){return function(){ thiz.moveTo(i); }; }(this,i);
|
||||
cdv.appendChild(btn);
|
||||
this.btns.push(btn);
|
||||
}
|
||||
this.parent.appendChild(cdv);
|
||||
if(this.btns.length>0) this.btns[0].style.backgroundColor='#f3af5a';
|
||||
};
|
||||
//Переместить на заданный слой (позиция с 0)
|
||||
this.moveTo = function(pos)
|
||||
{
|
||||
if(pos<0 || pos>this.firstmas.length - 1) return;
|
||||
var elm=this.firstmas[pos];
|
||||
for(var j=0;j<this.mas.length;j++)
|
||||
{
|
||||
if(this.mas[0]==elm) break;
|
||||
|
||||
var z=this.mas[this.mas.length-1].style.zIndex;
|
||||
for(var i=this.mas.length-1;i>0;i--)
|
||||
{
|
||||
this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
|
||||
}
|
||||
this.mas[0].style.zIndex=z;
|
||||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
|
||||
}
|
||||
//Поменяли местами востанавливаем прозрачность
|
||||
for(var i=0;i<this.mas.length;i++)
|
||||
{ this.mas[i].style.opacity = 1.0;
|
||||
}
|
||||
|
||||
clearTimeout(this.timeout_id)
|
||||
this.timeout_id=setTimeout(function(thiz){return function(){thiz.work();}}(this),10000);
|
||||
this.selected();
|
||||
};
|
||||
//Поменялся элемент
|
||||
this.selected = function()
|
||||
{
|
||||
var pos=0;
|
||||
for(var i=0;i<this.firstmas.length;i++)
|
||||
{ if(this.mas[0]==this.firstmas[i])
|
||||
{ pos=i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
//Обнуляем стили
|
||||
for(var i=0;i<this.btns.length;i++)
|
||||
this.btns[i].style.backgroundColor='#eeeeee';
|
||||
//Выставляем стиль для выбранного элемента
|
||||
this.btns[pos].style.backgroundColor='#f3af5a';
|
||||
};
|
||||
|
||||
//Private
|
||||
//Получить детей в виде массива
|
||||
this.getChildsMas = function()
|
||||
{
|
||||
var mas = new Array();
|
||||
if(this.parent!==null)
|
||||
{
|
||||
var child = this.parent.firstChild;
|
||||
while(child)
|
||||
{ if(typeof child.style !== "undefined") //Только те где есть стиль
|
||||
{ mas.push(child);
|
||||
}
|
||||
child = child.nextSibling;
|
||||
}
|
||||
}
|
||||
return mas;
|
||||
};
|
||||
//Private
|
||||
//Получить позицию по объекту (-1 если ненайден)
|
||||
this.getPos = function(obj)
|
||||
{
|
||||
for(var i=0;i<this.firstmas.length;i++)
|
||||
{ if(this.firstmas[i]==obj) return i;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
this.test=0;
|
||||
|
||||
//Конструктор
|
||||
this.timeout_id =0;
|
||||
this.parent=parent;
|
||||
this.mas = this.getChildsMas(); //Массив элементов которые будут "Галереится"
|
||||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
|
||||
this.firstmas = [].concat(this.mas); //Первоначальный порядок элементов
|
||||
this.btns = new Array();
|
||||
}
|
||||
|
||||
//Галерея изображений на странице товара (Двигается в право в лево)
|
||||
function TCGallery2(parent)
|
||||
{
|
||||
this.addImage = function(small)
|
||||
{
|
||||
this.mas.push({div: small, sell: false});
|
||||
|
||||
small.onmouseover = function(thiz,small)
|
||||
{ return function()
|
||||
{
|
||||
if(!thiz.ower) return;
|
||||
|
||||
pos=-1;
|
||||
for(i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i;} //Позиция элемента в массиве
|
||||
if(pos===-1) return;
|
||||
|
||||
if(thiz.ower && pos!== thiz.pos )
|
||||
{ thiz.pos=pos * 400;
|
||||
thiz.moveTo();
|
||||
}
|
||||
};
|
||||
}(this,small);
|
||||
|
||||
small.onclick = function(thiz,small)
|
||||
{ return function()
|
||||
{
|
||||
pos=-1;
|
||||
for(i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i; } else { thiz.mas[i].div.style.borderColor="#dfdfdf"; thiz.mas[i].sell=false; } //Позиция элемента в массиве
|
||||
if(pos===-1) return;
|
||||
|
||||
if(!thiz.mas[pos].sell) //Если щёлкнули на выделеное 1й раз
|
||||
{ thiz.mas[pos].sell = true;
|
||||
thiz.ower=false;
|
||||
small.style.borderColor='#999999';
|
||||
}else
|
||||
{ thiz.mas[pos].sell = false;
|
||||
thiz.ower=true;
|
||||
small.style.borderColor='#dfdfdf';
|
||||
}
|
||||
|
||||
if(pos!== thiz.pos )
|
||||
{ thiz.pos=pos * 400;
|
||||
thiz.moveTo();
|
||||
}
|
||||
};
|
||||
}(this,small);
|
||||
|
||||
};
|
||||
|
||||
//Плавная прокрутка по горизонтали
|
||||
this.moveTo = function()
|
||||
{
|
||||
if(this.parent==null) return;
|
||||
var dx=(this.pos - this.parent.scrollLeft)/20.0; //Шагов для достижения нужного положения
|
||||
if(dx>0) dx=Math.ceil(dx); else dx=Math.floor(dx);
|
||||
this.parent.scrollLeft+=dx;
|
||||
if(this.parent.scrollLeft!=this.pos)
|
||||
setTimeout(function(thiz){ return function(){ thiz.moveTo(); } }(this),10);
|
||||
}
|
||||
|
||||
this.mas = new Array(); //Массим элементов с рисуночками
|
||||
this.parent=parent;
|
||||
this.pos=0;
|
||||
this.ower=true;
|
||||
}
|
||||
Reference in New Issue
Block a user