Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.07.2016, 00:27
Интересующийся
Отправить личное сообщение для donkey Посмотреть профиль Найти все сообщения от donkey
 
Регистрация: 29.07.2016
Сообщений: 16

Привязка нескольких объектов к ссылке
Здравствуйте!

Никогда такого не было и вот опять! Помогите пожалуйста средствами разметки сделать анимацию..

Есть три слоя (DIV).

z-index: -1;
z-index: -2;
z-index: -3;

Первый (-1) и третий (-3) слои связаны по одному краю, второй (-2) слой не подвижен и находится между ними. При этом третий (-3) частично спрятан за экраном..

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

----
Честно сказать, сам уже и так и эдак, но.. Поиск? Приводит к разнообразию произвольных решений, каждое из которых работает, но как ни стараюсь их объединить и применить, это никак не приводит к желаемому результату..
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2016, 09:07
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от donkey
частично спрятан за экраном..
Боится наверно вылезать оттудова.

Сообщение от donkey
слои связаны по одному краю,
Мастера художественной вязки на линии.

Сообщение от donkey
и находится между ними
Евклид нервно курит: два слоя связаны по одному краю, а третий, находится между ними. Очевидно именно по этой причине он и спрятался за монитором.

ЗЫ Вставляй сюда свой спрятанный див и оба связанных как хтмл код. Тогда будет серьезно.
Ответить с цитированием
  #3 (permalink)  
Старый 30.07.2016, 10:13
Интересующийся
Отправить личное сообщение для donkey Посмотреть профиль Найти все сообщения от donkey
 
Регистрация: 29.07.2016
Сообщений: 16

Спасибо за ответ.

<html><head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; bottom: 15; left:15; width: 200; height: 185;}
#xx {z-index: -2; position: absolute; background-color: red; bottom: 0; left:15; width: 200; height: 35;}
#xxx {z-index: -3; position: absolute; background-color: yellow; bottom: -600; left:15; width: 200; height: 800; border: 1px solid black;}
</style>
</head>
<body>  
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div> 
</body>
</html>


Дело в том, что z-index не работает, если привязать первый и третий слои друг к другу поместив один в другой и двигать их, средний не будет находится между ними, (когда они начнут перемещение равное высоте нижнего слоя, он должен оставаться на месте)..

Все, что я нашел по скриптам, работает с отделаьными элементами, а вот с парой не связанных элементов.. Знаю, что делаю что-то не так, но вот что именно, не могу понять..

Последний раз редактировалось donkey, 01.08.2016 в 17:07.
Ответить с цитированием
  #4 (permalink)  
Старый 30.07.2016, 18:37
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Ты зачем этой занимаешься? Ну если есть повод отпостить что-то на говнокод.ру, то твой говнокод вполне мотивирует. )))

Во-первых боттом - это бред. Дно есть когда оно есть, а когда ничего нет, скорее всего браузер топает от топа. Во-вторых единицы измерения указывай. И последнее, бери вот этот код как базисно вменяемый и учись дальше. Я сшил твои кувадратики, дальше разберешься почему они сшились.

<html><head>
<style>
#x {z-index: 1; position: absolute; background-color: blue; 

top: 15;
left:15;
width: 200;
height: 185;

}

#xx {z-index: 2; position: absolute; background-color: red; 

top: 200; 
left:15; 
width: 200; 
height: 35;
}

#xxx {z-index: 3; position: absolute; background-color: yellow; 

top: 235; 
left:15; 
width: 200; 
height: 200; 


}
</style>
</head>
<body>



<div style="position:relative;">

	<div id="x">1</div>
	<div id="xx">2</div>
	<div id="xxx">3</div>

</div>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 30.07.2016, 18:40
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Да, про самую мякотку забыл. С какого одеколона у тебя z-index негативный? z-index - всегда относительный, то есть он не глобально херачит как думают некоторые оленеводы, а опирается на предка крепко стоящего на ногах. То есть div z-index=1, задаетъ всем отпрыскам такой же, а если какой-то хочет выше, то ставит себе z-index=1 и получается типа 2.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2016, 01:09
Интересующийся
Отправить личное сообщение для donkey Посмотреть профиль Найти все сообщения от donkey
 
Регистрация: 29.07.2016
Сообщений: 16

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

UPD отметил там момент сдвига, в первом сообщении с html..

Последний раз редактировалось donkey, 31.07.2016 в 01:13.
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2016, 10:59
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Я ж тебе и пишу, что нет у страницы "дна", вертикаль практически бесконечна, поскольку прокрутка присутствует, в том числе в твоем калечном хтмле.

Как и большинство оленеводов, ты понимаешь фразу position:absolute абсолютно, типа от левого верхнего пиксела монитора. На самом деле в хтмле нет ничего абсолютного, там вообще все относительное, в том числе и абсолютные элементы, просто они выпадают из потока и опираются на предка в потоке, если даже этот предок - туловище (body), или космос - html, поскольку html - это такой же элемент под названием htmlElement. Дошло?

Конечно нет. Так вот, чтобы сделать все вообще абслютным, надо пофиксить хтмль намертво, то есть

html{width:100%;height:100%;position:fixed;overflow:hidden;}


Только так можно избавиться от всех прокруток несмотря на любое содержание. А потом уже корежить это содержание так, чтобы оно вообще оказалось внутри пофиксенного хтля.
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2016, 11:08
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 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>

</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2016, 11:35
Интересующийся
Отправить личное сообщение для donkey Посмотреть профиль Найти все сообщения от donkey
 
Регистрация: 29.07.2016
Сообщений: 16

Простите меня, но каким, простите еще раз, образом это поможет мне показать спрятаную часть слоя №3, сдвинув его на всю его высоту, одновременно с этим сдвинуть слой №1, оставив его привязанным к краю слоя №3, оставив не подвижным слой №2.?
Ответить с цитированием
  #10 (permalink)  
Старый 31.07.2016, 11:41
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Тебе поможет скрипт, который будет привязывать квадраты как тебе надо и двигать куда хочешь. Напиши такой скрипт, поскольку сценарий кина есть только у тебя.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как найти точки соприкосновения двух объектов в RaphaelJS Fatalityap Библиотеки/Тулкиты/Фреймворки 3 03.08.2012 16:33
Привязка тултипа к ссылке. nematod Общие вопросы Javascript 0 22.02.2011 19:56
Согласованное движение нескольких объектов. kalach Общие вопросы Javascript 15 18.11.2010 19:06
Массив объектов или объект объектов vladlen Общие вопросы Javascript 19 30.10.2010 03:10
переход по ссылке только после нескольких кликов по ней smilexpo Events/DOM/Window 8 24.11.2009 16:57