2014-11-05 2 views
0

Я начинающий разработчик HTML, и, хотя я еще не преподавал Javascript, я хотел бы включить его в свою первую большую веб-страницу.
Мой макет выглядит так, с заголовком, меню и изображением вверху.Javascript image cross-fade на странице change


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

Как бы обозначить каждое изображение на HTML-странице? Работает ли он, или мне придется сильно изменить мою веб-страницу, чтобы только изменить содержимое и не загружать отдельный HTML-код?

+0

Если вы загружаете новую страницу, вы не можете сделать переход (вы можете, но это сосать). Вы должны использовать AJAX или загрузить другой контент и раскрыть его, а не переходить на другую страницу. –

+0

Это только для изображений или будет содержание под изображениями? Для любой анимации я рекомендовал бы [wowjs] (http://mynameismatthieu.com/WOW/), который поможет вам использовать анимации в [animimate css] (http://daneden.github.io/animate.css /) – ODelibalta

+0

С базовыми функциями моей веб-страницы и использованием исключительно HTML, я, вероятно, передам эту концепцию. Спасибо за ответ. @Sage Должно быть содержание (абзацы) и нижний колонтитул под изображениями. – Tallmios

ответ

0

Посмотрите на функции живого JQuery в: Это выглядит следующим образом:

$("#idOfYourImage").animate({opacity: 1}, 1000, function(){ 
    //Function to be executed when the animation is done 
}) 

Второй параметр (1000) стоит на время анимации.

Для этого, чтобы работать, вы должны установить CSS изображения непрозрачности: 0, так что он может анимировать между непрозрачностью 0 и непрозрачностью 1 (Это называется наплывом)

Знак доллара означает JQuery , вы должны включить этот скрипт, чтобы заставить его работать