LINUX.ORG.RU

JS коллаж

 , , jqueryrotate


0

1

Есть код, генерящий пафосный коллаж из картинок, для гламурной кисо звезды в шоке леди. Необходимо пофиксить так, чтобы предыдущая картинка при клике на новой, в обиде вставала на свое место, тужилась, но принимала антидепрессанты исходные размеры фигуры (сейчас пока на ней дважды не кликнешь, всего этого не произойдет). И разрядить расстояние от картинок. Не могу дотумкать, как сделать, так и сяк пытался, но без грибов таблеток веществ не выходит...

Пьяный код:

$(document).ready(function(){
$("#my_canvas img").each(
function(intIndex) {
//var r = Math.floor(Math.random() * $("#my_canvas").width());
var r = Math.random() * ($("#my_canvas").width() - 150) + 300;
var t = Math.floor(Math.random() * $("#my_canvas").height());
var h = 200;
var rot = Math.random() * (20 - (-20)) + (-20);

$(this).css("right", r);
$(this).css("top", t);
$(this).css("height", h);
$(this).rotate(rot);

$(this).bind(
    "click",
        function() {
            //alert("l=" + l + " t=" + t);
            if ($(this).height() == 200) {
            $(this).css("height", 500);
            $(this).css("z-index", 999);
            $(this).rotate(0);
            }
            else {
            	$(this).css("height", h);
            	$(this).css("z-index", 0);
            	$(this).rotate(rot);
            	}
        }
    );

}
);
});



Последнее исправление: makeB (всего исправлений: 10)

Написал так:

$(document).ready(function(){
$("#my_canvas img").each(
function(intIndex1) {
//var r = Math.floor(Math.random() * $("#my_canvas").width());
var r = Math.random() * ($("#my_canvas").width() - 150) + 300;
var t = Math.floor(Math.random() * $("#my_canvas").height());
var h = 200;
var rot = Math.random() * (20 - (-20)) + (-20);

$(this).css("right", r);
$(this).css("top", t);
$(this).css("height", h);
$(this).rotate(rot);

$(this).bind(
    "click",
        function() {
        	
        	
        	
            if ($(this).height() == h) {
            	
            	$("#my_canvas img").each(function(intIndex2) {
        	if ($(this).height() != h) {
        		$(this).css("height", h);
            	$(this).css("z-index", 0);
            	$(this).rotate(Math.random() * (20 - (-20)) + (-20));
            }
        	});
            	
            $(this).css("height", 500);
            $(this).css("z-index", 999);
            $(this).rotate(0);
            }
            else {
            	$(this).css("height", h);
            	$(this).css("z-index", 0);
            	$(this).rotate(rot);
            }
        }
    );

}
);
});

makeB
() автор топика
Ответ на: комментарий от makeB

Осиль нормальное форматирование.

Запоминай позицию, или добавляй класс к выделенному элементу (правда тогда придётся !important костылять), в чём проблема?

Алсо тебе наверняка нужно добавить обработчик на изменение размеров окна.

Kalashnikov ★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.