Сообщение от KupueIIIKo
|
 Может у кого нибуть есть идеи стрелки вращающийся кросбраузерной?)
Ну поле чудес делаю)
В принципе я просто стрелку ложу сверху поля! и нужно чтоб она вращалась -2-3 круга и рандомно останавливается!
|
Анимируем, как обычно.
по отрисовке кадра выставляем свойство. Вот тут начинаются проблемы.
- Проверяем поддержку CSS Transforms. Если браузер поддерживает их без префикса, то проверку не проводим.
- Если не поддерживает CSS3 Transforms, то это : либо старый IE, либо просто старый какой-то браузер
- Если поддерживаются фильтры (тут - IE<9), то используем их. Но с анимированием у них коряво.
- Если не поддерживаются и фильтры - то ничего...
я написал пример для анимирования : поворот элемента за одну секунду на 720 градусов.
<!DOCTYPE HTML>
<html>
<head><title>LOL</title>
</head>
<body>
<div id="arrow" style="border: 45px white solid;border-bottom-color:green;position: absolute;"></div>
<script type="text/javascript">
var el, prop, i, degs, time, started, progr, _set;
el = document.getElementById('arrow');
degs = 360*2; // 2 круга.
time = 1000;
prop = "transform";
_set = function(degrees){
el.style[ prop ] = 'rotate('+degrees+'deg)';
}
if( !(prop in el.style) ){ // supported with prefix, or with filters, or not supported.
prop = "webkit Moz O ms".split(' ');
i = 0;
while(i in prop){
if(prop[i]+'Transform' in el.style){
prop = prop[i]+'Transform';
break;
}
i += 1;
}
if(typeof prop !== 'string') { // unsupported, or supported with filters
if('filters' in el){ // supported with filters
el.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=0)';
_set = function(degrees){
var num;
if(degrees > 360)
degrees -= 360;
if(degrees < 45 || degrees > 300){
num = 0;
} else if(degrees >= 45 && degrees < 145) {
num = 1;
} else if(degrees >= 145 && degrees <= 235){
num = 2;
} else if(degrees < 300) {
num = 3;
}
el.filters[0].Rotation = num;
}
} else { // unsupported...
throw Error("Sorry, but your browser doesn't support CSS3");
}
}
} // support detection end.
started = Date.now();
i = setInterval(function(){
progr = ( Date.now() - started ) / time ;
if(progr > 1) progr = 1;
_set( progr*degs|0 );
if(progr === 1)
clearInterval(i);
}, 10);
</script>
</body>
</html>
