Форум

StartGames · #1 (**permalink**) 23.04.2024, 00:16

Здравствуйте.

Есть такой костыльный скрипт

<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive ani" id="nsv_mv_id{{ product.product_id }}" {% if product.thumb2 %}onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'" onmouseout="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb }}'"{% endif %}>

Нужно туда приделать анимацию. Но как это сделать...

voraa · #2 (**permalink**) 23.04.2024, 21:43

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

Нужно туда приделать анимацию.

А что должно прыгать и мигать?

StartGames · #3 (**permalink**) 24.04.2024, 05:33

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

А что должно прыгать и мигать?

абсолютно любая анимация, что то по типу fade)))
Потому что вот так не очень смотриться... https://nimb.ws/xImHATn

я пробовал добавить так: .fade(250) но не сработало...

StartGames · #4 (**permalink**) 25.04.2024, 01:30

И почему то работает только через document.getElementById

StartGames · #5 (**permalink**) 27.04.2024, 23:19

жаль конечно что в js не продумали вызов через элемент. Придется работать через скрипт...

Aetae · #6 (**permalink**) 28.04.2024, 01:25

StartGames,
Это:
onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'"
ты можешь заменить на:
onmouseover="this.src='{{ product.thumb2 }}'"
или вообще на:
onmouseover="src='{{ product.thumb2 }}'"

А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.

Можно по-быстрому изобразить что-то такое из двух картинок если у них одинаковые размеры, но придётся поверстать если случай не самый простой:

<body>
--
<img 
  width="100"
  height="100"
  class="img-responsive ani img-bottom" 
  src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
/><img 
  width="100"
  height="100"
  class="img-responsive ani img-top" 
  src="https://javascript.ru/forum/image.php?u=4993&dateline=1299014303"
/> 
--
<style>
.img-bottom {
  position:absolute;
  z-index: -1;
}
.img-top {
  opacity: 0;
  transition: 1s opacity;
}
.img-top:hover {
  opacity: 1;
}
</style>
</body>

voraa · #7 (**permalink**) 28.04.2024, 08:14

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

А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.

Что то типа такого можно сделать

<head>
<style>
	img {
		width: 200px;
		opacity: 1;
		transition: opacity 0.5s;
	}
	img.hide {
		opacity: 0;
	}
	
</style>
</head>
<body>

<img src="https://img.freepik.com/free-photo/view-of-adorable-kitten-with-simple-background_23-2150758096.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais" 
	data-img2="https://img.freepik.com/free-photo/closeup-vertical-shot-of-a-cute-european-shorthair-cat_181624-34587.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais">
<script>
const el = document.querySelector('img');
const img1 = new Image();
img1.src = el.src;
const img2 = new Image();
img2.src = el.dataset.img2;
el.addEventListener('mouseenter', ({target}) => {
	target.classList.add('hide');
	target.addEventListener('transitionend', () => {
		target.src = img2.src;
		target.classList.remove('hide');
	}, {once:true})
})
el.addEventListener('mouseleave', ({target}) => {
	target.classList.add('hide');
	target.addEventListener('transitionend', () => {
		target.src = img1.src;
		target.classList.remove('hide');
	}, {once:true})
})

</script>

</body>

рони · #8 (**permalink**) 28.04.2024, 10:56

voraa,
после run добавляй пожалуйста высоту окна просмотра run height=500

voraa · #9 (**permalink**) 28.04.2024, 13:17

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

voraa,
после run добавляй пожалуйста высоту окна просмотра run height=500

Спасибо. Добавил.

Aetae · #10 (**permalink**) 28.04.2024, 23:18

voraa, можно, но надо ещё не забыть добавить ожидание onload для второй картинки, потому что может возникнуть некрасивый эффект если загрузка тормознёт.
Также, если картинки большие, то надо будет хакать с незаметной предварительной вставкой на страницу, потому что скорость первой отрисовки уже загруженной картинки хоть и почти моментальная, но всё же именно почти и может вызвать очень краткое мигание.
Кстати в качестве хака от такого мигания помогает createImageBitmap после onload перед вставкой, но это чисто эмпирическое знание, не подкреплённое доками.

Форум

Справочник

Discord чат

Курсы javascript