css3 过渡，html5 audio

浏览数：28 / 时间：2015年06月09日

闲来无事练练手，素材来自《html5+css3+jquery应用之美》

书上写的太啰嗦了，就用给的代码做了个做了个效果，

比较简单，就不罗嗦了，贴一下主要代码和jquery

.banner{
    width: 728px;
    height: 176px;
    display: block;
    margin:40px auto;
    border:1px solid #333;
    position: relative;
    background: url(../images/banner-arrow.png) 20px 190px no-repeat,
                url(../images/banner-photo.png) -10px 190px no-repeat,
                url(../images/banner-09.png) 20px -354px no-repeat,
                url(../images/banner-bg.png) left top no-repeat;    
    transition: all 0.2s ease-in 0.2s;
    -moz-transition: all 0.2s ease-in 0.2s;    
    -webkit-transition: all 0.2s ease-in 0.2s;
    -o-transition: all 0.2s ease-in 0.2s;
}
.banner:hover{
    background-position:20px 90%,
                        -10px 20px,
                        20px center,
                        left top;
}
.banner-logo{
    position: absolute;
    top: 21px;
    left: 210px;
    transition: all 0.2s ease-in 0.2s;
    -moz-transition: all 0.2s ease-in 0.2s;    
    -webkit-transition: all 0.2s ease-in 0.2s;
    -o-transition: all 0.2s ease-in 0.2s;
}
.banner:hover .banner-logo{
    left: 540px;
}

    var banner_audio = new Audio();
    var webm = isSupportWebM();
    if(webm){
        banner_audio.src = ‘media/banner_sound.webm‘;
    }
    else{
        banner_audio.src = ‘media/banner_sound.mp3‘
    }
    
    
    $(‘.banner‘).mouseenter(function(){
        banner_audio.load();
        banner_audio.play();
    });
    $(‘.banner‘).mouseleave(function(){
        banner_audio.pause();
    });
    function isSupportWebM(){
        var tester = document.createElement(‘audio‘);
        return tester.canPlayType(‘audio/webm‘);

    }