ЕСЛИ Internet Explorer использует другую функцию jQuery - PullRequest
Новая
       15

ЕСЛИ Internet Explorer использует другую функцию jQuery

1 голос
/ 13 января 2011

Я создаю домашнюю страницу, которая по функции похожа на www.chanel.com. Когда вы впервые загружаете страницу, у меня есть встроенное видео через HTML5, воспроизводимое в цикле. В интересах совместимости и простоты я хотел бы, чтобы функция jQuery контролировала ее видимость (скрывается при наведении ссылок) во всех браузерах, кроме IE, и альтернативную функцию jQuery только для IE, скрывая видео и делая изображение видимым на своем месте.

Спасибо за ваше время!

HTML 

<div id="content">
    <video id="vid_home" width="780px" height="520px" autoplay="autoplay" loop="loop">
        <source src="Video/fernando.m4v" type="video/mp4" />
          <source src="Video/fernando.ogg" type="video/ogg" />
    </video>
    <img id="img_home" src="Images/home.jpg" alt="Fernando Garibay />
</div>

Javascript для Chrome / Safari / Firefox / Opera: 

// Navigation hover image preview
$('#img_home').css('display', 'none');
$('.nav').hover(function(){
    $('#vid_home').fadeOut(600, function(){
        $('#img_home').fadeIn(800);
    });
});
$('#item1').hover(function(){
    $('#img_home').attr('src', 'Images/music.jpg');
});
$('#item2').hover(function(){
    $('#img_home').attr('src', 'Images/photos.jpg');
});
$('#item3').hover(function(){
    $('#img_home').attr('src', 'Images/biography.jpg');
});
$('#item4').hover(function(){
    $('#img_home').attr('src', 'Images/discography.jpg');
});
$('#item5').hover(function(){
    $('#img_home').attr('src', 'Images/contact.jpg');
});
$('#item6').hover(function(){
    $('#img_home').attr('src', 'Images/blog.png');
});
// Navigation hover image leave
$('#trigger').mouseleave(function(){
    $('#img_home').fadeOut(600, function(){
        $('#vid_home').fadeIn(800)
    });
});

Javascript для IE (любая версия): 

// Navigation hover image preview
$('#img_vid').css('display', 'none');
$('#item1').hover(function(){
    $('#img_home').attr('src', 'Images/music.jpg');
});
$('#item2').hover(function(){
    $('#img_home').attr('src', 'Images/photos.jpg');
});
$('#item3').hover(function(){
    $('#img_home').attr('src', 'Images/biography.jpg');
});
$('#item4').hover(function(){
    $('#img_home').attr('src', 'Images/discography.jpg');
});
$('#item5').hover(function(){
    $('#img_home').attr('src', 'Images/contact.jpg');
});
$('#item6').hover(function(){
    $('#img_home').attr('src', 'Images/blog.png');
});
// Navigation hover image leave without selection
$('#trigger').mouseleave(function(){
    var img = $('#img_home');
    if (img.attr('src') != 'Images/home.jpg'){
        img.fadeOut(600, function(){ 
            img.attr('src','Images/home.jpg');
            img.fadeIn(800);
        });
    }
});

1 Ответ

0 голосов
/ 13 января 2011

Видео представляет собой красную сельдь, за исключением того, что вам, вероятно, следует приостановить и возобновить воспроизведение, чтобы сохранить ресурсы, когда его невозможно увидеть. Я сделал простой пример, показывающий, что все, что вам нужно, это немного CSS, чтобы сделать их слоями. http://jsfiddle.net/HJg6Q/1/

Ваш код для изменения источника изображения является разумным, хотя, если вы не предварительно буферизировали изображения, вы можете получить случай, когда вы начнете добавлять последнее загруженное изображение, а затем оно появится на новом изображении. Очень непрофессионально. Я бы лично предложил уникальный тег <img> для каждого изображения, которое вы хотите отобразить, и помечайте их соответствующим образом.

...