note(放一些有用的小技巧)

发表于

“在这里滑动下滑”

这里会放一些平时经常用的一些js,html,css等的方法,和动画.

js部分

保存两位小数

1
2
3
4
5
6
7
8
9
10
function changeTwoDecimal(x)
{
    var f_x = parseFloat(x);
    if (isNaN(f_x))
    {
        return false;
    }
    f_x = Math.round(f_x *100)/100;
    return f_x;
}

placeholder兼容到ie8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if( !('placeholder' in document.createElement('input')) ){
    $('input[placeholder],textarea[placeholder]').each(function(){
        var that = $(this),
        text= that.attr('placeholder');
        if(that.val()===""){
            that.val(text).addClass('placeholder');
        }
        that.focus(function(){
            if(that.val()===text){
                that.val("").removeClass('placeholder');
            }
        })
        .blur(function(){
            if(that.val()===""){
                that.val(text).addClass('placeholder');
            }
        })
        .closest('form').submit(function(){
            if(that.val() === text){
                that.val('');
            }
        });
    });
}

自由落体

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
function bounce(t){
            var ts=t * t * 8.0;
            return ts;
        }
        function getInterpolation(t){
            var t = t*1.1226;
            if(t<0.3535){
                return bounce(t);
            }else if(t < 0.7408){
                return bounce(t - 0.54719) + 0.7;
            }else if(t < 0.9644){
                return bounce(t - 0.8526) + 0.9;
            }else {
                return bounce(t - 1.0435) + 0.95;
            }
        }
        var tt=0;
        setInterval(function(){
            tt++;
            if(tt>=1000){
                return;
            }
            var s=-50*getInterpolation(tt / 1000)+50;
            $('.qing-transform').show().css({transform: 'rotate('+-s+'deg)','-webkit-transform': 'rotate('+-s+'deg)','-moz-transform': 'rotate('+-s+'deg)','-o-transform': 'rotate('+-s+'deg)'})
        },1)
css部分

单词换行

1
2
word-break:break-all;
word-wrap:break-word;

垂直剧中

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
父元素中:

display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;

display: -webkit-flex;
display: flex;

flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;

子元素中:

-webkit-flex: 10;
-moz-flex: 10;
-ms-flex: 10;
-o-flex: 10;
flex: 10;

-webkit-box-flex:10;
-moz-box-flex:10;
box-flex:10;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*-webkit-box-pack: center;*/
/*-ms-flex-pack: center;*/
/*-webkit-justify-content: center;*/
/*justify-content: center;*/
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;