Благодарю вас! Собственно я и попросил помочь со скриптом, а не с позиционированием..
|
То есть никому не известно как оно должно шевелиться, сценарий пиши и все.
<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>
|
Цитата:
|
Не очень понятно, что вы подразумеваете под словом сценарий, но я постараюсь объяснить..
У меня есть панель, назовем ее условно "меню" (x) в ней находится несколько привязанных (сшитых с ней, если вам так угодно) объектов. Этот объект, с кучей объектов внутри гипотетически находится над двумя или даже тремя слоями (xx), которые маскируют, скрывают, еще один слой, частично спрятанный за экраном (xxx).. Мне бы хотелось при нажатии на ссылку, которая находится совсем в другом месте страницы, сдвинуть мою панель "меню", одновременно с этим сдвинуть слой который спрятан под ним и за экраном на на его длину, но так, чтобы маскирующие слои.. оставались неподвижными.. И, чесно сказать, я не в ус ногой в скрипты.. Решения, которые я находил в интернете могут работать лишь с одним слоем, нескорые из них на чистом css, нескорые на скрипте, но как я ни старался понять как это работает, увы.. Если возможно написать хоть примерно, чтобы хоть-что-нибудь двигалось, тогда мне возможно будет легче понять.. Я стараюсь понять, поверьте.. |
Цитата:
|
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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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>
|
<!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, круто! Гранд мерси! Вы почти..
Понимаете, я "ваяю" хомяка, не совсем обычного конечно.. И, если с логикой у меня вроде ничего так, то с функциями и алгоритмами на данный момент полный алес, увы. Но.. Я разгадал некоторые функции вашего скрипта и, в целом, он вполне подходит для моих целей. Еще раз большое спасибо вам! Единственное, если возможно сделать, чтобы эти два слоя двигались одновременно? Или.. Придумаю что-нибудь.. Спасибо вам! Огромное! (: П.С. Ссылку на ваш профиль, если вы не против конечно, вставлю в мои "титры", которые, собственно, и находятся в этом слое.. |
| Часовой пояс GMT +3, время: 02:03. |