Javascript-форум - Вращение стрелки

Цитата:

Сообщение от KupueIIIKo (Сообщение 167721)

:) Может у кого нибуть есть идеи стрелки вращающийся кросбраузерной?)
Ну поле чудес делаю)
В принципе я просто стрелку ложу сверху поля! и нужно чтоб она вращалась -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>