Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2018, 12:36
Новичок на форуме
Отправить личное сообщение для rocketaF Посмотреть профиль Найти все сообщения от rocketaF
 
Регистрация: 20.11.2018
Сообщений: 5

Исчезновение картинок по нажатию
Всем привет, задали мне тут одно задание, сам в JS не силен, но перегуглив весь инет, понял, что нужно использовать функцию .show / .hide, но как мне сделать, чтобы после исчезновения, при повторном нажатие появились вновь картинки)

Мб будет не трудно помочь, само задание:

Само задание:
Нажимаем на лампу -> горит свет и видно "мага и шляпу"
По нажатию на мага "он произносит заклинание" и оттуда летит птичка, ещё раз жмем на мага, птичка залетает в шляпу и из шляпы появляется заяц)
По нажатию на лампу тухнит свет и ничего не видно)
Хелп, мужики

Я что-то типо такого придумал:
<script>
	$("#robot").hide()
$('#clickme').click(function(){
  $("#robot").show('slow')
});
</script>

Но как сделать, чтобы по нажатию все пропадало и тухнул свет, я хызы и как реализовать появление света)
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2018, 12:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,708

Сделайте макет сцены.

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2018, 12:42
Новичок на форуме
Отправить личное сообщение для rocketaF Посмотреть профиль Найти все сообщения от rocketaF
 
Регистрация: 20.11.2018
Сообщений: 5

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js">
  
  </script>
  <style type="text/css">
  

  </style>
</head>
<body bgcolor="white">
<div align="center" id="clickme">
  <img width="150" height="150" src="img/s.png">
</div>
<div align="center">
<img align="center" id="mag" width="150" height="150" src="img/v.png">
<img align="center" id="cilindr" width="150" height="150" src="img/c.png">
</div>


<script>
	$("#mag").hide()
	$("#cilindr").hide()
$('#clickme').click(function(){
  $("#mag").fadeToggle("slow");
  $("#cilindr").fadeToggle("slow");
});
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2018, 12:44
Новичок на форуме
Отправить личное сообщение для rocketaF Посмотреть профиль Найти все сообщения от rocketaF
 
Регистрация: 20.11.2018
Сообщений: 5

Я пока не могу понять, как их стянуть вниз, css тоже хромает, но пытаюсь гуглить, но все тщетно, не могли бы знатоки помочь, пожалуйста?
Просто сынишка попросил помочь, а отказать ему я не могу, пытаюсь всеми силами помочь)
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2018, 12:46
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,708

Волшебный у вас макет...
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2018, 12:46
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от rocketaF
Я пока не могу понять, как их стянуть вниз, css тоже хромает,
position: absolute;
top: значение
left: значение
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2018, 12:50
Новичок на форуме
Отправить личное сообщение для rocketaF Посмотреть профиль Найти все сообщения от rocketaF
 
Регистрация: 20.11.2018
Сообщений: 5

Сообщение от Nexus Посмотреть сообщение
Волшебный у вас макет...
Почему?
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2018, 12:56
Новичок на форуме
Отправить личное сообщение для rocketaF Посмотреть профиль Найти все сообщения от rocketaF
 
Регистрация: 20.11.2018
Сообщений: 5

Сообщение от j0hnik Посмотреть сообщение
position: absolute;
top: значение
left: значение
Спасибо очень помог!

Ребят, может кто-то подскажет, как сделать появление "СВЕТА" такого?
Ответить с цитированием
  #9 (permalink)  
Старый 20.11.2018, 13:14
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от rocketaF
Ребят, может кто-то подскажет, как сделать появление "СВЕТА" такого?
<style>
  #triangle-up {
  width: 50px;
	border-bottom: 100px solid yellow;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	opacity: .5;
}
  </style>

<div id="triangle-up"></div>

opacity - прозрачность
Ответить с цитированием
  #10 (permalink)  
Старый 20.11.2018, 13:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,708

https://jsfiddle.net/6rqhav3u/5/
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="scene">
	<div class="toggler">
		<img alt="Lamp" class="lamp"/>
	</div>
	<div class="main-objects">
		<div class="lamp-light">
			<div class="witch-box">
				<img alt="Witch" class="witch"/>
			</div>
			<div class="hat-box">
				<img alt="Hat" class="hat"/>
				<img alt="Bird" class="bird"/>
			</div>
		</div>
	</div>
</div>
<style>
body{
	background:#000;
}

.scene{
	position:relative;
	text-align:center;
	color:#FFF;
}

.hat-box{
	position:relative;
}

.hat{
	position:relative;
	z-index:2;
}

.bird{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	transition:top ease 1s;
}

.bird.fly-out{
	top:-60px;
}

.lamp-light{
	display:flex;
	align-items:center;
	max-width:400px;
	margin:200px auto 0;
}

.lamp-light>*{
	flex-basis:50%;
	opacity:0.5;
}

.lamp-light:before{
	content:'';
	position:absolute;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:solid 295px transparent;
	border-bottom:solid 350px #FF9;
	border-top:none;
}
.witch{
	position:relative;
	z-index:2;
}




/* stubs */
.lamp{
	position:relative;
	z-index:2;
	background:#00F;
	height:60px;
	width:60px;
	display:inline-block;
}

.witch{
	background:#F90;
	display:inline-block;
	width:90px;
	height:150px;
}

.hat{
	width:90px;
	height:90px;
	display:inline-block;
	background:#0F0;
}

.bird{
	display:inline-block;
	background:#F00;
	width:40px;
	height:40px;
}
</style>
<script>
(function($scene){
	$scene.find('.toggler .lamp').click(function(){
		$scene.find('.main-objects').toggle();
	}).end().find('.witch').click(function(){
		$scene.find('.bird').toggleClass('fly-out');
	});
})($('.scene'));
</script>


upd. не могу свет победить, так что допиливайте сами.

Последний раз редактировалось Nexus, 20.11.2018 в 13:26.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное пролистывание картинок слайдера Corazon Элементы интерфейса 3 30.01.2017 22:07
Смена картинок по нажатию кнопки Kennen194 Events/DOM/Window 6 16.12.2015 21:05
Смена картинок на JS. Помогите реализовать! Aggao Элементы интерфейса 3 27.11.2014 23:32
Как можно узнать\вычислить кол-во доступных картинок desertFox Общие вопросы Javascript 5 18.08.2014 14:41
Автопереключатель картинок Vempel Общие вопросы Javascript 0 03.10.2013 18:36