31.07.2016, 11:59
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Благодарю вас! Собственно я и попросил помочь со скриптом, а не с позиционированием..
|
|
31.07.2016, 12:07
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
То есть никому не известно как оно должно шевелиться, сценарий пиши и все.
<html><head>
<style>
html{width:100%;height:100%;position:fixed;overflow:hidden;}
body{margin:20px;}
#x {
position: absolute; background-color: blue;
width: 100; /* меняй размеры */
height: 100;
top: 0; /* меняй координаты */
left: 0;
z-index: 10; /* меняй ось z */
}
/* во всех остальных квадратах и "сшивай" блеать как угодно */
#xx {
position: absolute; background-color: red;
width: 100;
height: 100;
top: 50;
left:50;
z-index: 2;
}
#xxx {
position: absolute; background-color: yellow;
width: 100;
height: 100;
top: 100;
left: 100;
z-index: 3;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</div>
<script>
var obj={
x:null,
xx:null,
xxx:null,
};
for(var id in obj)
obj[id]=document.getElementById(id);
var cnt=0,inc=1,step=5,min=1,max=50,left;
t = setInterval(function(){
cnt+=inc;
left=cnt*step;
if(cnt>max || cnt<min) inc=-inc;
obj.x.style.left=left;
obj.xx.style.top=left;
obj.xxx.style.left=left;
obj.xxx.style.top=left;
},100);
</script>
</body>
</html>
|
|
31.07.2016, 12:09
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от donkey
|
|
позиционированием
|
Сначала надо сделать позиционирование, чтобы все работало ожидаемо, а потом уже остается только написать скрипт согласно сценария анимации. Бери и пиши, или пиши сценарий тут. |
|
01.08.2016, 09:57
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Не очень понятно, что вы подразумеваете под словом сценарий, но я постараюсь объяснить..
У меня есть панель, назовем ее условно "меню" (x) в ней находится несколько привязанных (сшитых с ней, если вам так угодно) объектов. Этот объект, с кучей объектов внутри гипотетически находится над двумя или даже тремя слоями (xx), которые маскируют, скрывают, еще один слой, частично спрятанный за экраном (xxx)..
Мне бы хотелось при нажатии на ссылку, которая находится совсем в другом месте страницы, сдвинуть мою панель "меню", одновременно с этим сдвинуть слой который спрятан под ним и за экраном на на его длину, но так, чтобы маскирующие слои.. оставались неподвижными..
И, чесно сказать, я не в ус ногой в скрипты.. Решения, которые я находил в интернете могут работать лишь с одним слоем, нескорые из них на чистом css, нескорые на скрипте, но как я ни старался понять как это работает, увы..
Если возможно написать хоть примерно, чтобы хоть-что-нибудь двигалось, тогда мне возможно будет легче понять.. Я стараюсь понять, поверьте..
Последний раз редактировалось donkey, 01.08.2016 в 10:01.
|
|
01.08.2016, 10:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
Сообщение от donkey
|
|
Решения, которые я находил в интернете могут работать лишь с одним слоем,
|
покажите пример, чтобы хоть понять о чём вы говорите |
|
01.08.2016, 10:44
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
warren buffet, нарисовал примерный сценарий:
<!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: -300; top:15; width: 500; height: 185; border: 1px solid black; text-align: right}
</style>
</head>
<body>
<a href="#">onClick</a>
<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>
</body></html>
рони, при помощи transition и много решений со скриптами..
Последний раз редактировалось donkey, 01.08.2016 в 17:08.
|
|
01.08.2016, 11:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
donkey,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
01.08.2016, 13:58
|
|
Профессор
|
|
Регистрация: 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: -300; top:15; width: 500; height: 185; border: 1px solid black; text-align: right}
</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() {
x.style.left = '0px';
xxx.style.left = getComputedStyle(x, "").getPropertyValue('width');
}
</script>
</body>
</html>
|
|
01.08.2016, 14:45
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
<!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);
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);
}
}, 10);
}
}
</script>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 01.08.2016 в 14:58.
|
|
01.08.2016, 17:10
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Dilettante_Pro, круто! Гранд мерси! Вы почти..
Понимаете, я "ваяю" хомяка, не совсем обычного конечно.. И, если с логикой у меня вроде ничего так, то с функциями и алгоритмами на данный момент полный алес, увы.
Но.. Я разгадал некоторые функции вашего скрипта и, в целом, он вполне подходит для моих целей. Еще раз большое спасибо вам!
Единственное, если возможно сделать, чтобы эти два слоя двигались одновременно? Или.. Придумаю что-нибудь..
Спасибо вам! Огромное! (:
П.С. Ссылку на ваш профиль, если вы не против конечно, вставлю в мои "титры", которые, собственно, и находятся в этом слое..
|
|
|
|
