XX活动HTML5页面总结
22 / 07 / 2015 buling

这几天一直在做XX活动,明天发,主要负责手Q平台,微信平台被人抢了,所以。有如下些点分享
1、页面字体大小,

html {font-size:62.5%}
/*未经调整的浏览器都符合: 1em=16px,所以10px=0.625em,设置html为62.5%,那1rem就是10px*/
/*之后页面布局均使用rem来布局,方便统一调整*/

2、音乐播放操作



(function(){
    //audio dom
    var videoMusic = $('#audio')[0];
    //监听回调
    var videoLoaded = function(){
        //控制按钮
        var $controll = $('#J_music-controller');
        //设置音量
        videoMusic.volume = 0.5;
        //开始播放
        videoMusic.play();
        $controll.show().on('tap', function(){
            var $this = $(this);
            if($this.hasClass('music-close')){
                $this.removeClass('music-close');
                videoMusic.play();
            }else{
                $this.addClass('music-close');
                videoMusic.pause();
            }
        });
    };
    //监听是否加载完成可以播放
    videoMusic.addEventListener('canplay', videoLoaded);
    if(videoMusic.readyState==4){
        videoLoaded();
    }
}());

3、陀螺仪模拟摇一摇

var AcceHelper = (function(){
    var lastAcceTime = 0,
        lastAcceInfo = false,
        firstAcceInfo = false,
        lastDistance = 5000,
        isStart = false,
        stopTimer = 0,
        config = {
            timeLimit : 100, //两次感应间隔时间为200
            speedLimit : 80, //速度限制为80
            stopLimit : 400
        };
    var getDistance = function(a, l){
        var powDis = Math.pow(a.x-l.x, 2) + Math.pow(a.y-l.y, 2);
        return Math.sqrt(powDis);
    };
    var doAccelerationIncludingGravity = function(acceleration, oncallback, stopcallback){
        var curTime = (new Date()).getTime(),
            a = acceleration,
            l = lastAcceInfo,
            time = curTime-lastAcceTime;
        if(time>config.timeLimit && lastAcceInfo){
            //debugFunc('on acceleration call['+(a.x+'_'+a.y+'_'+a.z)+']');
            lastAcceTime = curTime;
            var distance = getDistance(a, l),
                speed = distance/time*1000;
            if(speed>config.speedLimit){
                isStart = true;
                if(stopTimer){ //清除结束
                    clearTimeout(stopTimer);
                }
                if(!firstAcceInfo){ //设置第一次
                    firstAcceInfo = {
                        x : a.x,
                        y : a.y,
                        z : a.z
                    };
                }
                var aDistance = getDistance(a, firstAcceInfo);
                debugFunc('on acceleration call['+(aDistance+'_'+lastDistance+'_'+distance)+']');
                if(aDistance[[[[['+num+'
'); endcall && endcall.call(null, num, info, acceleration); num = 0; }); }; var removeAccelerometer = function(){ $(window).off('devicemotion'); }; return { on : endAccelerometer, remove : removeAccelerometer, init : function(options){ $.extend(config, options); } }; }()); //使用方法 AcceHelper.on(function(num, info, acceleration){ //晃动第几次 debugFunc('on acceleration num:' + num); }, function(num){ //结束 //结束时回调总共摇动了几次 debugFunc('on acceleration end num:' + num); });

3、分享一些动画

无标签信息
0