01.08.2016, 17:50
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
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>
|
|
01.08.2016, 18:11
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
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>
|
|
02.08.2016, 04:06
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
donkey, сценарий - это screenplay, то есть то, что должно играть на экране. Сценарий это: техническое задание и технические условия, это чертеэ строительства дома, это технология выпечки хлеба и рецепт приготовления котлет, это алгоритм и тактировка, это что угодно, что рассказывает что надо взять, когда и сколько, куда положить, прибить поставить, пришить и что должно получиться.
У тебя свое заводское понимание устройства веб-сайтов, из которого ты вылезать не хочешь. Как ты придумал - так не делают.
|
|
02.08.2016, 04:08
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Нет никаких "слоев" на веб-странице, это дебильные кодеры 90-х так назвали arbitrary division - который div, когда им их показали вместо table. Веб - это не фотошоп и не люстра.
Твой сценарий пишется так: как сдвинуть два дива одновременно с сохранением относительного положения их друг к другу. Вот так, коротко и ясно. Третий див вообще не колебет, его двигать не надо, значит его нету в сценарии, статист.
method = div1.left = div2.left+div2.width;
Последний раз редактировалось warren buffet, 02.08.2016 в 04:16.
|
|
02.08.2016, 15:57
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Dilettante_Pro, очень интересно.. По крайней мере теперь, после этих нескольких примеров, становится куда как более ясно как работает скрипт. Вы очень выручили. Спасибо вам!
warren buffet, вы прямо как генерал Кастер из фильма "Маленький Большой Человек", - совершенно точно определили мою профессию по внешнему виду! Крайне рекомендую вам пересмотреть эту шикарную киноленту.. Дабы.. Случайно не повторить весьма печальную участь.. Генерала.. Джорджа Армстронга Кастера! (:
|
|
02.08.2016, 16:33
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Иди сшивай слои умнег. Белыми нитками.
|
|
24.08.2016, 14:14
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Здравствуйте!
Еще раз большое спасибо, но мне снова нужна помощь с этим скриптом.
Вот с чем я столкнулся: Лиса слишком медленно открывает скрытый слой, даже несмотря на интервал времени установленный в скрипте.. Возможно, что просто скрытый слой слишком "перегружен", но в Хроме все нормально, даже слишком хорошо, только вот при повторном нажатии на ссылку в обеих браузерах снова запускается функция и оба слоя "уходят" с экрана.
Почитал по поводу запрета повторного нажатия и, по ходу, этот вопрос не решается без подключения внешних библиотек.. Возможно ли избежать этого и просто привязать эти два слоя к мыши, без ссылки, и просто "вытягивать" их оба, но не более чем на заранее заданную ширину, как штору?
Буду очень признателен за вашу помощь!
Последний раз редактировалось donkey, 24.08.2016 в 16:27.
|
|
24.08.2016, 14:19
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
Сообщение от donkey
|
|
даже несмотря на интервал времени установленный в скрипте..
|
значение 10 слишком мало для любого браузера, и код использующий setInterval (или document.write  ) это плохой код. |
|
24.08.2016, 16:32
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
рони, поверьте, менял интервал времени, но увы.. Более того, опытным путем установил, что при замене оnClick на onFocus становится ненамного легче в Хроме, но все равно слой рано или поздно "уезжает" со страницы..
|
|
26.08.2016, 18:52
|
|
Профессор
|
|
Регистрация: 21.09.2015
Сообщений: 196
|
|
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>
|
|
|
|
