Як зробити зміну картинок при наведенні (jQuery), forwww -Блог для веб-розробників
Гіф-анімація є? А якщо знайду?) У цьому невеликому уроці ми розглянемо як створити ефект швидкої зміни картинок за допомогою jQuery, задавши свій час затримки на зміну картинки, а рухатиметься вона лише при наведенні курсору на зображення.
Як міняти зображення при наведенні jQuery
Звичайно, цей код можна переписати просто «щоб запускався при старті сторінки», а не для події onhover (або при наведенні). Я не знаю, які у вас цілі, тільки не перестарайтеся з анімацією. Наш HTML:
у тегimg ми записуємо атрибутdata і перераховуємо шляхи до картинок через кому, клас для цього тегаjs-hover— він нам потім знадобиться.
Наш код javascript, точніше jQuery 🙂
Частину цього коду знайшов на просторах інтернету і трохи покращив під себе.750 - значення мілісекунд до зміни картинки. В принципі, це єдиний параметр, який вам тут потрібно міняти. Не забувайте поміщати скрипти в низ сторінки, але якщо ви раптом хочете запхати його в head, то не забувайте писати document ready:
Особливо корисно, якщо картинок багато, але якщо їх всього 2, можна зробити найпростіші дії у самому тегу. Відразу скажу, це не найкращий варіант запису такого коду, але для лінивих 🙂 цілком має місце бути:
Хороший варіант, якщо у вас 2 картинки, кольорова та сіра. Але знову ж таки — не полінуйтеся переписати це все під якусьhover функцію, яка бере дані з атрибуту data або data-image або data-src (будь-які data-назви атрибутів вважаються валідними).
Займаюсь веб-розробкою з 2011 року. Переглянути деякі з моїх робіт, а також дізнатися трохи більше про мене, ви можете наforwww.com/dmitriy/.
Які послуги надаю: - створення сайтів, шаблонів та компонентів на 1С-Бітрікс; - розробка функціоналу з нуля та доопрацювання коду на вже створених проектах; - Адаптивна верстка макетів та натяжка на Бітрікс; - Парсинг файлів та вивантаження на сайт (формати - CSV, XML, XLSX, JSON) - інтеграції зі сторонніми сервісами з API; - Багатомовні версії та багато іншого.
Популярні статті:
Знаходжуся в пошуках вирішення проблеми, в якій при завантаженні сторінки, буває так, що картинка не завантажується і у вихідному коді пусто. Незрозуміло, чому так відбувається, але відбувається. Може просто слід кеш увімкнути на сайті. Скрипти виніс у шапку. Думав цей варіант працюватиме без перебоїв, але ні, часом картинка не підвантажується, хоч і швидкість
99мбіт на speed тесті. Все ж таки взяв це скрипт із-за класу, інакше всі картинки, які треба, або не треба шукають data src…
Якщо я вас правильно зрозумів, то ви можете просто перевіряти у самому скрипті на наявність атрибута src у зображення, і лише потім виконувати скрипт: $('.js-hover').hover(function() if (this.src != false) < /*код скрипта*/> >);
А у вас картинки на вашому сервері? Не перевіряв як із зовнішніми файлами поводиться скрипт. Опера, наскільки знаю, зараз використовує той же вебкит двигун що і гугл хром, там має все нормально працювати. Ну а ІЕ це взагалі інша історія:). Іншої реалізації немає, а пошукати б радив на англомовних джерелах або stackoverflow — можливо там ви знайдете якісь jquery on hover function, jquery animation on hover або щось подібне до цього
У мене дві опери, старенька зручна, проінспектувати що-небудь, правити вихідний код, і нова)моєму зберігаються, всього 5 штук виходить в середньому кожна 100кб, це 500кб на одному слайді, а слайдів (картинок з мінливими кадрами) на сторінках по 20 - 40. Але за ідеєю 1 картинка повинна тут же вантажиться при наведенні, а тут ніби ( моя думка) скрипт починає раніше часу гортати кадри вперед, навіть не встигнувши завантажити першу, в налаштуваннях швидкість коштує 700. Тобто виходить при миттєвому наведенні курсору на картинку скрипт за замовчуванням відразу відправляє запит не встигнувши дати завантажитися основному html. Може таке бути?
а чи можна посилання? мені так буде легше зрозуміти проблему
Дякую, довго шукай подібне рішення, але підкажіть як зробити зміну картинок плавною, може бути з якими-небудь ефектами
На жаль, у цьому варіанті не дуже зручно буде застосовувати якусь анімацію, т.к. тег img залишається на місці, а ми змінюємо лише значення його атрибутуsrc, який відповідає за шлях до картинки. Більшість варіантів анімації пов'язані з прихованням, появою, або зміна розмірів елемента. Як мені здається, для анімації потрібно змінювати і HTML і трохи правити скрипт, причому важливо, щоб анімація не переривалася т.к. це наведення. На жаль, у мене немає під рукою готового рішення, так би я вам його скинув 🙂
У будь-якому випадку – спасибі, але до скрипту є претензії у валідатора "Error: Attribute data no allowed on element img at this point.". Я розумію, що валідатор — скиглій, але все ж таки щось пішло не так, сподіваюся це не критично
А спробуйте додати через дефіс ще щось, наприклад data-images, і в скрипті не забудьте поміняти. Наскільки я пам'ятаю, валідатор такі атрибути за помилку не вважатиме 🙂
Так, ви абсолютно праві, дякую:)