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

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

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

2、音乐播放操作

1
2
<!--music dom; preload属性自行查阅-->
<audio id="audio" src="./static/WeAreYoung.mp3" loop preload="auto" autoplay="true"></audio>
View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(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、陀螺仪模拟摇一摇

View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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<lastDistance){ //回退的时候回调
                    oncallback && oncallback.call(null, {
                        distance : distance,
                        time : time,
                        speed : speed
                    }, a);
                }
                lastDistance = aDistance;
 
            }else if(isStart){
                if(stopTimer){ //清除结束
                    clearTimeout(stopTimer);
                }
 
                isStart = false;
                stopTimer = setTimeout(function(){
                    firstAcceInfo = false;
                    lastAcceInfo = false;
                    lastDistance = 5000;
 
                    debugFunc('on acceleration stop!'); //回调
                    stopcallback && stopcallback.call(null, {
                        distance : distance,
                        time : time,
                        speed : speed
                    }, a);
                }, config.stopLimit);
            }
        }
 
        lastAcceInfo = {
            x : a.x,
            y : a.y,
            z : a.z
        };
    };
 
    var beginAccelerometer = function(oncallback, endcallback){
        if(false && mqq.support("mqq.sensor.startAccelerometer")){
            mqq.sensor.startAccelerometer(function(ret, x, y, z){
                doAccelerationIncludingGravity({
                    x:x, y:y, z:z
                }, oncallback, endcallback);
            });
            Helper.showAlert('启用Q的陀螺仪');
            return ;
        }
 
        //浏览器内调用自测用
        if(window.addEventListener){
            $(window).off('devicemotion').on('devicemotion',function(eventData){
                doAccelerationIncludingGravity(eventData.accelerationIncludingGravity, oncallback, endcallback);
                eventData.preventDefault();
            });
        }else{
            Helper.showAlert('不支持摇一摇功能');
        }
    };
 
    var endAccelerometer = function(oncall, endcall){
        var timer = 0,
            num = 0;
        beginAccelerometer(function(info, acceleration){
            num += 1;
            oncall && oncall.call(null, num, info, acceleration);
        }, function(info, acceleration){
            //$('#J_page-box-1').prepend('<div>[[[[['+num+'</div>');
            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