Как да направя размяна на изображения при задържане (jQuery), forwww - Блог за уеб разработчици

Има ли GIF анимация? И ако го намеря?) В този кратък урок ще разгледаме как да създадем ефекта на бързо променящите се снимки с помощта на jQuery, задавайки свое време за забавяне за промяна на картината и тя ще се движи само когато задържите курсора на мишката върху изображението.

Как да променяте изображения в hover jQuery

Разбира се, този код може да бъде пренаписан просто "да се стартира при стартиране на страницата", а не за onhover събитието (или при нанасяне на курсора). Не знам какви са целите ви, просто не прекалявайте с анимацията.
Нашият HTML:

в таг img пишем атрибута данни и избройте пътищата до изображения, разделени със запетаи, клас за този маркер js-hover - ще ни трябва по-късно.

Нашият javascript код, по-точно jQuery 🙂

Намерих част от този код в Интернет и леко го подобрих за себе си. 750 - стойността на милисекунди преди промяна на картината. По принцип това е единственият параметър, който трябва да промените тук. Не забравяйте да поставите скриптове в самото дъно на страницата, но ако изведнъж искате да го натъпчете в главата, не забравяйте да напишете документ готов:

Особено полезно е, ако има много снимки, но ако има само 2 от тях, можете да извършите най-простите действия в самия таг. Трябва да кажа веднага, че това не е най-добрият начин за писане на такъв код, но за мързеливите quite е напълно възможно да бъдат:

Добър вариант, ако имате 2 снимки, една цветна и една сива. Но отново - не бъдете мързеливи да пренапишете всичко под някои задръжте курсора на мишката функция, която взема данни от атрибута на данните или изображението на данни или data-src (всички имена на атрибути на данни се считат за валидни).

Занимавам се с уеб разработка от 2011г. Можете да видите някои от моите произведения, както и да научите малко повече за мен, на forwww.com/dmitriy/.

Какви услуги предоставям:
- Създаване на сайтове, шаблони и компоненти на 1С-Битрикс;
- Разработване на функционалност от нулата и финализиране на кода по вече създадени проекти;
- Адаптивно оформление на оформления и разтягане на Bitrix;
- Анализ и качване на файлове на сайта (формати - CSV, XML, XLSX, JSON)
- Интеграция с услуги на трети страни чрез API;
- Многоезични версии и др.

Популярни статии:

Търся решение на проблем, при който при зареждане на страницата се случва картината да не се зарежда и изходният код src = " да е празен. Не е ясно защо това се случва, но се случва. Може би просто трябва да активирате кеша на сайта. Скриптовете поставят всичко в заглавката. Мислех, че тази опция ще работи без прекъсване, но не, понякога картината не се зарежда, въпреки че скоростта

---