Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2017, 11:02
Интересующийся
Отправить личное сообщение для cherrypashka Посмотреть профиль Найти все сообщения от cherrypashka
 
Регистрация: 29.01.2014
Сообщений: 22

Блок наезжает на другой
Здравствуйте! Помогите, пожалуйста! Мне нужно организовать наезд одного блока на другой. Видимый блок на всю страницу, наезжающий блок должен выезжать с правой стороны. Мне нужна только "рыба".
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2017, 11:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от cherrypashka
Видимый блок на всю страницу, наезжающий блок должен выезжать с правой стороны. Мне нужна только "рыба".
Может подойти обычная табличка из одной строки и двух колонок...
Т.к. уменьшая первую колонку, вторая будет кагбэ "появляться".
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2017, 11:38
Интересующийся
Отправить личное сообщение для cherrypashka Посмотреть профиль Найти все сообщения от cherrypashka
 
Регистрация: 29.01.2014
Сообщений: 22

Мне нужно без таблицы! Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2017, 13:21
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style>
		*{
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
		}
		div{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			z-index: 1
		}
		.div1{
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			z-index: 2
			right: -100%;
			animation: naezd 3s;
			background-color: red;
			top:0;
		}
		@keyframes naezd {
			0% {right: -100%;}
			100% {right: 0;}
		}
	</style>
</head>
<body>
	<div>
		<div class="div1"></div>
	</div>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
	<script>
	</script>
</body>
</html>

Если я правильно понял
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2017, 13:53
Интересующийся
Отправить личное сообщение для cherrypashka Посмотреть профиль Найти все сообщения от cherrypashka
 
Регистрация: 29.01.2014
Сообщений: 22

Супер! Всё правильно поняли! Спасибо! Только не пойму, зачем нужен закомментированный и пустой скрипт?
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2017, 13:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от cherrypashka Посмотреть сообщение
Супер! Всё правильно поняли! Спасибо! Только не пойму, зачем нужен закомментированный и пустой скрипт?
ну нужен, можете удалить эти строки.
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2017, 13:59
Интересующийся
Отправить личное сообщение для cherrypashka Посмотреть профиль Найти все сообщения от cherrypashka
 
Регистрация: 29.01.2014
Сообщений: 22

Так, а если мне это нужно делать при нажатии на элемент, тогда animation: naezd 3s; добавлять в свойства элемента при нажатии?
Ответить с цитированием
  #8 (permalink)  
Старый 07.06.2017, 14:07
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от cherrypashka Посмотреть сообщение
Так, а если мне это нужно делать при нажатии на элемент, тогда animation: naezd 3s; добавлять в свойства элемента при нажатии?
в animation: никак, на какой элемент нажимать хотите?
Ответить с цитированием
  #9 (permalink)  
Старый 07.06.2017, 14:18
Интересующийся
Отправить личное сообщение для cherrypashka Посмотреть профиль Найти все сообщения от cherrypashka
 
Регистрация: 29.01.2014
Сообщений: 22

div
Ответить с цитированием
  #10 (permalink)  
Старый 07.06.2017, 14:30
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

тогда так
<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
		.div1{
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			right: -100%;
			background-color: red;
			transition: 3s;
			top:0;
		}
		.animate{
			right: 0;
		}
	</style>
</head>
<body>
	<div id="id">
		<div class="div1"></div>
	</div>
<script>
	document.getElementById('id').onclick = function(){
		document.querySelector(".div1").classList.add("animate");
	}
</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт скрытия блока,если другой блок становится больше какой то длинны? INSIDER73 Элементы интерфейса 2 07.04.2017 13:17
Фиксированное меню наезжает на блок tard Элементы интерфейса 1 20.10.2016 12:41
Как переместить содержимое блока в другой блок? Vladislav Общие вопросы Javascript 7 06.12.2015 17:22
Блок fixed наезжает Waranaika Общие вопросы Javascript 2 15.08.2015 00:38
Форма с чекбоксом, как вывести данные в другой блок tatynechka jQuery 1 15.04.2015 15:15