Сменить текст на картинку в data-toggle-text
Всем привет!
Подскажите пожалуйста, как вместо текста, сделать картинки, что бы менялись когда блок открываешь и закрываешь. Пробовал стилями, но я так понял, что скрипт еще, что то шаманит... Помогите пожалуйста, а то в программировании дубзеленый(
<button class="js-button" data-toggle-text="×">≡</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);
|
Где именно нужны картинки и какие?
|
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="×">≡</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>
|
немного не так) но интересно)
нужно что бы сперва было одна картинка, нажал вместо нее другая появилась, еще раз нажал - вернулась предыдущая,.. сейчас тоже самое происходит с текстом даже не могу пример вставить, так досих пор и не понял, как и где они вставляются.. то нужен function, то не нужен... |
и можно ли как то добавить анимацию на открытие блока? в идеале было бы, что при открытии, каждый элемент появлялся постепенно
|
Цитата:
|
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>
|
Цитата:
|
<!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="×" data-open="≡">≡</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>
|
Цитата:
я про этот блок, что бы в нем поставить картинки, вместо символов |
| Часовой пояс GMT +3, время: 12:26. |