donkey,
двигаются одновременно (по крайней мере, начинают)
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left'));
if (left > 0) {
t = setInterval(function() {
--left;
x.style.left = left + "px";
if (left == 0) clearInterval(t);
}, 10);
var leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
leftmin = parseInt(getComputedStyle(x, "").getPropertyValue('width'));
tt = setInterval(function() {
--leftXXX;
xxx.style.left = leftXXX + "px";
if (leftXXX == leftmin) clearInterval(tt);
}, 10);
}
}
</script>
</body>
</html>
|
donkey,
Первый тянет за собой второго
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function () {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left')),
widthX = parseInt(getComputedStyle(x, "").getPropertyValue('width')),
leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left'))
if (left > 0) {
t = setInterval(function () {
--left;
x.style.left = left + "px";
leftmin = left + widthX;
if (leftXXX > leftmin) {
xxx.style.left = leftmin + "px";
};
if (left == 0) clearInterval(t);
}, 10);
}
}
</script>
</body>
</html>
|
donkey, сценарий - это screenplay, то есть то, что должно играть на экране. Сценарий это: техническое задание и технические условия, это чертеэ строительства дома, это технология выпечки хлеба и рецепт приготовления котлет, это алгоритм и тактировка, это что угодно, что рассказывает что надо взять, когда и сколько, куда положить, прибить поставить, пришить и что должно получиться.
У тебя свое заводское понимание устройства веб-сайтов, из которого ты вылезать не хочешь. Как ты придумал - так не делают. |
Нет никаких "слоев" на веб-странице, это дебильные кодеры 90-х так назвали arbitrary division - который div, когда им их показали вместо table. Веб - это не фотошоп и не люстра.
Твой сценарий пишется так: как сдвинуть два дива одновременно с сохранением относительного положения их друг к другу. Вот так, коротко и ясно. Третий див вообще не колебет, его двигать не надо, значит его нету в сценарии, статист. method = div1.left = div2.left+div2.width; |
Dilettante_Pro, очень интересно.. По крайней мере теперь, после этих нескольких примеров, становится куда как более ясно как работает скрипт. Вы очень выручили. Спасибо вам!
warren buffet, вы прямо как генерал Кастер из фильма "Маленький Большой Человек", - совершенно точно определили мою профессию по внешнему виду! Крайне рекомендую вам пересмотреть эту шикарную киноленту.. Дабы.. Случайно не повторить весьма печальную участь.. Генерала.. Джорджа Армстронга Кастера! (: |
Иди сшивай слои умнег. Белыми нитками.
|
Здравствуйте!
Еще раз большое спасибо, но мне снова нужна помощь с этим скриптом. Вот с чем я столкнулся: Лиса слишком медленно открывает скрытый слой, даже несмотря на интервал времени установленный в скрипте.. Возможно, что просто скрытый слой слишком "перегружен", но в Хроме все нормально, даже слишком хорошо, только вот при повторном нажатии на ссылку в обеих браузерах снова запускается функция и оба слоя "уходят" с экрана. Почитал по поводу запрета повторного нажатия и, по ходу, этот вопрос не решается без подключения внешних библиотек.. Возможно ли избежать этого и просто привязать эти два слоя к мыши, без ссылки, и просто "вытягивать" их оба, но не более чем на заранее заданную ширину, как штору? Буду очень признателен за вашу помощь! |
Цитата:
|
рони, поверьте, менял интервал времени, но увы.. Более того, опытным путем установил, что при замене оnClick на onFocus становится ненамного легче в Хроме, но все равно слой рано или поздно "уезжает" со страницы..
|
donkey,
если еще актуально, посмотрите такой вариант:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div id="screen" style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
var screen = document.getElementById("screen");
a.onclick = function () {
var leftX = parseInt(getComputedStyle(x, "").getPropertyValue('left')),
widthX = parseInt(getComputedStyle(x, "").getPropertyValue('width')),
leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
widthXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('width'));
if (isNaN(leftX)){
leftX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(x, "").getPropertyValue('right'))-widthX;
}
if (isNaN(leftXXX)){
leftXXX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(xxx, "").getPropertyValue('right'))-widthXXX;
}
$("#x").css("left", leftX).animate({left: "0px"}, 1500);
$("#xxx").css("left", leftXXX).animate({left: widthX+"px"}, 1500);
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 02:03. |