📜 ⬆️ ⬇️

Cute, easy and simple twist of goods in the online store

Take JavaScript and quickly fasten to the store a nice twist of goods. Works in IE 6+, FF, Opera 9+. Maybe somewhere else - I did not check :) I give the script as-is-who wants to improve - on my own.

Original krutilki look here at the bottom of the site: veliki.com.ua
And if he ever disappears there, then we look at how it looks in poor quality on YouTube:


And now the implementation:
')
//// 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);
}

Source: https://habr.com/ru/post/72563/


All Articles