Pull to refresh

Симпатичная, легкая и простая крутилка товаров в интернет-магазине

Reading time 4 min
Views 1K
Берем JavaScript и быстренько прикручиваем к магазину симпатичную крутилку товаров. Работает в ИЕ 6+, FF, Опере 9+. Может еще где-то — я не проверял :) Отдаю скриптик как-есть — кто хочет улучшить — самостоятельно.

Оригинал крутилки смотрим тут внизу сайта: veliki.com.ua
А если там он когда-нибудь исчезнет, то смотрим как это выглядит в плохом качестве на ютубе:


И теперь реализация:

//// ROTATOR/////

var rx = 300;// дефаултовый радиус по оси Х.
var ry = 20;// дефаултовый радиус по оси Y.
var cx = 310;// дефаултовый центр овала
var cy = 15;// дефаултовый центр овала
// дефаулты не так чтоб сильно нужны, все равно при ресайзе страницы все пересчитывать.

var RoLay = Array(); //Массив слоёв для вращения

// еще нам понадобится в html коде страницы такая конструкция
// // // // К body надо подписать onLoad="rotateinit();"

// товары для вращения обернуть в див:
//

// В css описываем милый сердцу размер и цвет вращаемого слоя:
// .lay {
// z-index: 2; position:absolute; width:183px; height:88px; left: 422px; top: 135px;
// }

/////////////////////////////////////////////////////////////////////////////////////////////////////////
// функция rotateinit инициализирует всю систему. Запускать по событию onLoad страницы.
function rotateinit(){
var DivList = document.getElementsByTagName('div'); //Выбирааем в массив все слои страницы.
i = 1;
//учитывая, что страница может быть совершенно разной ширины - пересчитаем Х-радиус овала и Х координату его центра.
rx = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth /2 - 220;
cx = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth /2 - 120;
// и оставляем в массиве только те, которые начинаются на кодовую строку 'RoLay'
// Именно это кодовое слово мы забили в шаблон вывода товара на странице магазина.
for (j=0;j<DivList.length;j++){
if(DivList[j].id.substr(0,5) == 'RoLay'){
RoLay[i] = DivList[j];
i++;
}
}
// после инициализации нужно сразу запустить проворот, который правильно расставит все товары.
go(-1);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
// параметр dd - это угол, на который поворачивается овал за один временной такт. Чем больше - тем больше скорость.
function go(dd){
//учитывая, что страница может быть совершенно разной ширины - пересчитаем Х-радиус овала и Х координату его центра.
rx = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth /2 - 220;
cx = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth /2 - 120;

// для некоторых других нужд переменная текущего угла поворота передается через значение поля
// формы типа hidden. Не обращаем внимания.Но помним, что hidden c таким айди на страничке должен быть.
d = document.getElementById('txt').value*1;
document.getElementById('txt').value = d+dd;
// цикл перебирает 10 товаров. Их конечно можно крутить любое количество, подсчитать которое стоит в функции rotateinit
// или определить прямо тут по размеру массива вращаемых дивов RoLay. Но я знаю что мне нужно ровно 10 - нет смысла усложнять.
for ( var i = 1; i<=10; i++){
// не совсем корректная математически, но наиболее красиво работающая формулка.
x = cx + rx*Math.cos(2*3.1*(i-1)/10 + d/72);
y = cy + ry*Math.sin(2*3.1*(i-1)/10 + d/72);
d = d + 1;

// op - это прозрачность слоя. Запрозрачним те что выше.
op = (y-cy+ry)/(2.5*ry)+0.2;
RoLay[i].style.opacity = op;
RoLay[i].style.MozOpacity = op;
RoLay[i].style.filter='alpha(opacity='+op*100+')';
RoLay[i].style.top = y;

// и расставим zindex так, чтобы создать трехмерность - просто нижние слои перекрывают верхние.
RoLay[i].style.left = x;
RoLay[i].style.zIndex=Math.round((y-cy+ry)/(2*ry)*10,0);
RoLay[i].style.position = 'absolute';

}

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
// запускаем вращение.
function goo(t){
vvv = setInterval("go("+t+");",30);
document.getElementById('txt2').value=vvv;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//останавливаем вращение
function stp(){
clearInterval(document.getElementById('txt2').value);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//При наведении на полупрозрачный объект на заднем плане - делаем его приятным для рассматривания, т.е. выдвигаем вперед.
function look(obj){
obj.style.zIndex=99;
op = 0.99;
obj.style.opacity = op;
obj.style.MozOpacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////
// а когда рассмотрели - задвигаем назад
function hide(obj){
ly=obj.style.top.replace('px','') * 1;
lx=obj.style.left;
lop = (ly-cy+ry)/(2.5*ry)+0.2;
obj.style.opacity = lop;
obj.style.MozOpacity = lop;
obj.style.filter='alpha(opacity='+lop*100+')';
obj.style.zIndex=Math.round((ly-cy+ry)/(2*ry)*10,0);
}
Tags:
Hubs:
0
Comments 6
Comments Comments 6

Articles