h5 相关

1.判断视频

http://www.mamicode.com/info-detail-881733.html

var len,vTime; vid.onended = function() { console.log("播放完毕")
}; vid.addEventListener('loadedmetadata',function(){
    $('.showLoad').css('display','none')
}); /*视频总的时长*/ vid.onloadedmetadata = function () { var vLength = vid.duration; console.log(vLength); len= (vLength*0.8); console.log(len);
}; /*视频播放进度*/ vid.ontimeupdate = function () { vTime = vid.currentTime; console.log(vTime); if(vTime >= len ){ console.log("播放超过80%")
    }
};

2.h5 音频微信自动播放

http://bob.bid999.com/bob2016/wyh5

function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
        audio.play();
    };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", play, false);
} audioAutoPlay('Jaudio3');

3.h5动画相关

1.动画循环

    animation:play1 2s linear infinite alternate; -webkit-animation: play1 2s linear infinite alternate;

2.动画停留在最后一帧    

    animation: leftbox 1s linear forwards; -webkit-animation: leftbox 1s linear forwards;

3.动画示例：      

    平移动画        

     @keyframes leftbox { 0% { transform: translate(0,0); } 100% { transform: translate(700px,0); } } @-webkit-keyframes leftbox { 0% { -webkit-transform: translate(0,0); } 100% { -webkit-transform: translate(700px,0); } }     

     缩放动画        

    @keyframes btnani { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @-webkit-keyframes btnani { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }     

     定点动画        

    transform-origin: 50% 100%;      

    旋转动画        @keyframes frameani { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } @-webkit-keyframes frameani { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } }     

     向上滚动的动画   根据雪碧图定位，定时器延时更换类

     -webkit-transition: 0.35s ease-in-out;

      -moz-transition: 0.35s ease-in-out;

      -ms-transition: 0.35s ease-in-out; 

       o-transition: 0.35s ease-in-out;

      transition: 0.35s ease-in-out; }        .two .wenzikuang .wenzi1{ background: url('../images/wenzi.png') no-repeat -73px -202px; }        .two .wenzikuang .wenzi2{ background: url('../images/wenzi.png') no-repeat -84px -435px; }        .two .wenzikuang .wenzi3{ background: url('../images/wenzi.png') no-repeat -75px -669px; } .two .wenzikuang .wenzi4{ background: url('../images/wenzi.png') no-repeat -75px -902px; }