Показать сообщение отдельно
  #6 (permalink)  
Старый 27.01.2014, 00:52
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Еще одно))) Подскажите как сделать теперь rotate(transform) для каждого элемента, что бы был универсальный метод, вот у меня крутит все блоки у которых класс определенный, а как можно переделать что бы при вызове метода "rotateBox()" для каждого блока он делал rotate отдельно?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(document).ready(function(){
	
	function Boxs(width,height,bgColor){
		this.width = width;
		this.height = height;
		this.bgColor = bgColor;
	}
	
	var box = new Boxs(250,250,'green');
	var box2 = new Boxs(200,200,'yellow');

	//Создание коробки
	Boxs.prototype.createBox = function(width,height,bgColor){
		$('#idDiv').append('<div class="clBox"></div>');
		$('.clBox:last').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
	}
	
	box.createBox();
	box2.createBox();


	var i = 0;
	var timer;
	//Поворот коробки
	Boxs.prototype.rotateBox = function(){
			$('.startInterval').click(function(){
				if(!timer){
					timer = setInterval(function(){
					$('.clBox').css({'transform' : 'rotate('+ i++ +'deg)'});
					if(i === 180){
						i = 0;
					}
					},30);
				}
			});
	};
        
    $('.stopInterval').click(function(){
		clearInterval(timer);
		timer = null;
	});

	box2.rotateBox();

});
</script>
</head>

<body>
	<div id="idDiv"></div>
	<div class="startInterval">[START]</div>
	<div class="stopInterval">[STOP]</div>
</body>

</html>
Ответить с цитированием