Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > DHTML работа со слоями. Три квадрата.

Автор: olegop 11.7.2009, 13:53

Три залитых цветом квадрата расположены каскадно. Каждый квадрат имеет текстовую подпись (A, B и C соответственно). Зеленый квадрат содержит текстовое поле (ширина поля 207 px). Образец текста приведен ниже.

По истечении 2-х секунд квадраты начинают менять порядок расположения по оси Z: квадрат B перекрывает квадрат С, затем квадрат A перекрывает квадрат B. Изменение расположения необходимо выполнить с применением анимации (изменение прозрачности квадратов и их содержимого). Алгоритм анимации может быть произвольным.

___

Я в жаваскрипте не силен... нужна помощь, какими инструментами жаваскрипта можно это осуществить, помогите ссылками или наводками, или подскажите плиз функции какие использовать ... макет страницы набросал

Код


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#red, #green, #blue { position:absolute; width:260px; height:260px;}
#red{background:#e71f06; left:395px; top:148px; }
#green{background:#008d44; left:487px; top:240px; }
#blue{background:#004391; left:579px; top:332px; }

#red{z-index:1;}
#green{z-index:2;}
#blue{z-index:3;}
</style>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>

</body>
</html>

логически по размыслив я понял что в течении двух секунд надо менять значение z-index у трех id ... как это осуществить? Помогите пожалуйста, очень нужно!

Автор: IDVsbruck 11.7.2009, 16:54

а) не советую играться с прозрачностью содержимого контейнера - исчезнет сглаживание шрифтов;
б) значительно проще делать такие штуки с помощью фреймворков - к примеру, jQuery;
в) грамотнее использовать один контейнер и коллекцию содержимого и баловаться не контейнерами, а содержимым;
г) эффект прозрачности делается дополнительным закрывающим дивом, у которого меняется прозрачность, открывая содержимое под собой.

Советы дал. На конкретные вопросы ответить будет проще.

Автор: olegop 12.7.2009, 14:02

IDVsbruck
Спасибо! Вроде у меня как получилось с помощью жиквери.. что то наваять, криво но получилось

Код


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
  <script src="jquery.js"></script>
  
  <script>
  $(document).ready(function(){
  setTimeout(function() { 
          $("#green").animate({opacity: "hide" }, 300, function() { 
           $("#green").css("z-index", "4").animate({opacity: "show" }, 300);
         });
  }, 2000);
  
 setTimeout(function() { 
          $("#red").animate({opacity: "hide" }, 300, function() { 
           $("#red").css("z-index", "5").animate({opacity: "show" }, 300);
         });
  }, 4000);  
  
 setTimeout(function() { 
          $("#green").animate({opacity: "hide" }, 300, function() { 
           $("#green").css("z-index", "2").animate({opacity: "show" }, 300);
         });
  }, 8000);
  
 setTimeout(function() { 
          $("#red").animate({opacity: "hide" }, 300, function() { 
           $("#red").css("z-index", "1").animate({opacity: "show" }, 300);
         });
  }, 6000);  
  });
  </script>

<style type="text/css">
#red, #green, #blue { position:absolute; width:260px; height:260px;}
#red{background:#e71f06; left:395px; top:148px; }
#green{background:#008d44; left:487px; top:240px; }
#blue{background:#004391; left:579px; top:332px; }

#red{z-index:1;}
#green{z-index:2;}
#blue{z-index:3;}
</style>
<body>
<div id="red"></div>
<div id="green">afgadsgasdf</div>
<div id="blue"></div>

</body>
</html>

А теперь вопрос, это мерцание сделать бесконечным? или как этот корявый код преобразовать в цикл, а то у меня уже голова не варит.

Автор: IDVsbruck 12.7.2009, 15:03

Код

#colors {
    position:absolute;
    width:260px;
    height:260px;
}

Код

<body>
    <div id="colors"></div>
</body>

Код

var bars = [{color:"#e71f06", left:"395px", top:"148px"},{color:"#008d44", left:"487px", top:"240px"},{color:"#004391", left:"579px", top:"332px"}];
var texts = ["Red bar", "Green bar", "Blue bar"];
var counter = 0;
$(function(){
    $("#colors").fadeOut(0);
    blinkBars();
});
function blinkBars() {
    $("#colors").css({"background-color":bars[counter],"left":bars[counter].left,"top":bars[counter].top}).html(texts[counter]).fadeIn(300,function(){$(this).fadeOut(300,function(){counter = ++counter % 3;blinkBars()})})
}

Я точно не помню, меняются ли стили при display:none (fadeOut выставляет) - вроде меняются.
Если все же нет, то вместо fadeIn и fadeOut делать видимым, затем назначать стиль и анимировать прозрачность - на 1 действие больше, но это неважно, главный совет - рекурсия и использование одного контейнера.
Что мне во всем этом не нравится - шрифты будут выглядеть коряво, так как использована анимация прозрачности. И, как я уже говорил в прошлом посте, обойти это можно двумя способами: а) показывать текст при полной видимости контейнера; б) использовать покрывающий див с цветом бекграунда, который делаясь полностью видимым, скрывает находящийся под ним контейнер - правда, при сложном бекграунде или заполнении страницы его сделать несколько сложновато.