Форум

maximamus · #1 (**permalink**) 26.03.2016, 02:31

Всем привет!
Подскажите пожалуйста, как вместо текста, сделать картинки, что бы менялись когда блок открываешь и закрываешь. Пробовал стилями, но я так понял, что скрипт еще, что то шаманит...
Помогите пожалуйста, а то в программировании дубзеленый(

<button class="js-button" data-toggle-text="&#215;">&#8801;</button>
            <div class="js-container hidden">
                <div>
                   ТЕКСТ
                 </div>
            </div>

;(function($D){
	var $button    = $D.querySelector('.js-button'),
		$container = $D.querySelector('.js-container');

	$button.addEventListener('click', function(e){
		var data = e.target.dataset,
			toggleText = $button.innerHTML,
			isVisible = $container.style.display == 'block';

		$button.innerHTML = data.toggleText;
		data.toggleText = toggleText;

		$container.style.display = isVisible ? 'none' : 'block';
	});
})(document);

Decode · #2 (**permalink**) 26.03.2016, 03:15

Где именно нужны картинки и какие?

Decode · #3 (**permalink**) 26.03.2016, 03:47

maximamus, так?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="js-button" data-toggle-text="&#215;">&#8801;</button>
    
    <div class="js-container">
      <div>
        <img src="http://javascript.ru/forum/images/smilies/unsure.gif" alt="">
      </div>
    </div>
    
    <script>
      var images = ['unsure.gif', 'laugh.gif', 'agree.gif', 'dance3.gif', 'lol.gif'];
      var button = document.querySelector('.js-button');
      var container = document.querySelector('.js-container');
      var i = 0;
      
      button.onclick = function() {
        toggle(container);
      };
      
      function changeImage() {
        var img = container.querySelector('img');

        img.src = 'http://javascript.ru/forum/images/smilies/' + images[++i % images.length];
      }
      
      function toggle(elem) {
        if ( elem.classList.contains('hidden') ) {
          elem.classList.remove('hidden')
        } else {
          elem.classList.add('hidden');
          changeImage();
        }
      }
    </script>
  </body>
</html>

maximamus · #4 (**permalink**) 27.03.2016, 05:13

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

maximamus · #5 (**permalink**) 28.03.2016, 01:59

и можно ли как то добавить анимацию на открытие блока? в идеале было бы, что при открытии, каждый элемент появлялся постепенно

maximamus · #6 (**permalink**) 28.03.2016, 18:31

Сообщение от Decode

Где именно нужны картинки и какие?

в самом верху, когда блок закрыт (три полоски) и когда открыт (Х), вместо них нужно поставить свои картинки (img)

Decode · #7 (**permalink**) 28.03.2016, 20:54

maximamus, так?

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
</head>
<body>
	<button class="js-button" data-toggle-text="×">≡</button>

	<div class="js-container">
		<div>
			<img src="http://game-tournaments.com/media/smile/yo.png" alt="" />
		</div>
	</div>

	<script>
		var images = ['http://game-tournaments.com/media/smile/yo.png', 'http://www.likiliks.ru/images/smile_high.png'];
		var button = document.querySelector('.js-button');
		var img = document.querySelector('.js-container img');
		var i = 0;

		button.onclick = function() {
			toggle(img);
		};

		function changeImage() {
			img.src = images[++i % images.length];
		}

		function toggle(elem) {
			if (elem.offsetHeight) {
				animate(elem, 1000);
			} else {
				changeImage();
			 	animate(elem, 1000)
			}
		}

		function animate(elem, duration) {
			var begin = performance.now();
			var startHeight = elem.offsetHeight;

			window.requestAnimationFrame(function animate(now) {
				var progress = (now - begin) / duration;

				progress > 1 && (progress = 1);

				if (startHeight)
					elem.style.height = (startHeight - startHeight * progress) + 'px';
				else
					elem.style.height = progress * 256 + 'px';

				progress < 1 && window.requestAnimationFrame(animate);
			});
		}
	</script>

	<!--<script src="http://localhost:35729/livereload.js"></script>-->
</body>
</html>

maximamus · #8 (**permalink**) 28.03.2016, 21:04

Сообщение от Decode

maximamus, так?

нет) вот где полоски сверху у Вас, вот там должна меняться картинка, то есть это кнопка, которая открывает блок... блок появился и вместо нее появился крест, нажал на него, блок закрылся и опять полоски появились

Decode · #9 (**permalink**) 28.03.2016, 21:51

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
	<style>
		.hidden img {
			height: 0;
		}
	</style>
</head>
<body>
	<button class="js-button" data-close="&#215;" data-open="&#8801;">&#8801;</button>

	<div class="js-container hidden">
		<img src="http://game-tournaments.com/media/smile/yo.png" alt="" />
	</div>

	<script>
		var images = ['http://game-tournaments.com/media/smile/yo.png', 'http://www.likiliks.ru/images/smile_high.png'];
		var button = document.querySelector('.js-button');
		var container = document.querySelector('.js-container');
		var img = container.querySelector('img');
		var animated = false;
		var i = 0;

		button.onclick = function() {
			toggle(img);
		};

		function changeImage() {
			img.src = images[i++ % images.length];
		}

		function toggle(elem) {
			if ( container.classList.contains('hidden') ) {
				button.innerHTML = button.dataset.close;

				animate(elem, 1000, function() {
					container.classList.remove('hidden');
					changeImage();
				});
			} else {
				button.innerHTML = button.dataset.open;

			 	animate(elem, 1000, function() {
					container.classList.add('hidden');
				});
			}
		}

		function animate(elem, duration, callback) {
			if (animated) return;

			var begin = performance.now();
			var startHeight = elem.offsetHeight;

			animated = true;

			window.requestAnimationFrame(function animate(now) {
				var progress = (now - begin) / duration;

				progress > 1 && (progress = 1);

				if (startHeight)
					elem.style.height = (startHeight - startHeight * progress) + 'px';
				else
					elem.style.height = progress * 256 + 'px';

				(progress < 1) ?  window.requestAnimationFrame(animate) : animated = false;
			});

			setTimeout(callback, 0);
		}
	</script>

	<!--<script src="http://localhost:35729/livereload.js"></script>-->
</body>
</html>

maximamus · #10 (**permalink**) 28.03.2016, 23:00

Сообщение от Decode

new

<button class="js-button" data-close="×" data-open="≡">≡</button>

я про этот блок, что бы в нем поставить картинки, вместо символов

Форум

Справочник

Discord чат

Курсы javascript