javaScript/word/字母往上出现.html at master · hee2000/javaScript · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            text-align: center;
            height: 400px;
            line-height: 400px;
        }
    </style>
</head>
<body>
<div class="box">
    <h3 class="list_text">sanda</h3>
</div>
<button>click</button>
</body>
<script src="js/segment.min.js"></script>
<script src="js/d3-ease.v0.6.js"></script>
<script src="js/letters.js"></script>
<script src="js/mo.min.js"></script>
<script>
    window.onload=function(){
        var options = [
            {
                size : 400,
                weight : 25,
                color: '#008ad4',
                duration: 1.5,
                delay: 0.1,
                easing: d3_ease.easeBounceOut.ease
            }
        ];
        var items = [].slice.call(document.querySelectorAll('.box'));
        function init() {
            items.forEach(function(item, pos) {
                var word = item.querySelector('.list_text'),
                        playCtrl=document.getElementsByTagName('button')[0],  //按钮
//                    playCtrl = item.querySelector('button'),
                // initialize the plugin
                        instance = new Letters(word, options[pos]),
                        endPlayCallback = function() {
                            playCtrl.className = 'control__button control__button--play';
                            word.setAttribute('data-state', 'stop');
                        };

                // show word  开始就把文字展现出来，注释掉就是开始为空白
                instance.showInstantly();

                // moo.js configurations for some of the buttons
                var timelines = {};
                var letters = [].slice.call(word.querySelectorAll('svg')),
                    distanceFactor = 40;
                    timelines[pos+1] = new mojs.Timeline();
                letters.forEach(function(letter, i) {
                    var tween = new mojs.Tween({
                        duration : 1500,
                        delay: 100 + 100*i,
                        easing: mojs.easing.bounce.out,
                        onUpdate: function(progress) {
                            letter.style.WebkitTransform = letter.style.transform = 'translate3d(0,' + distanceFactor * (1-progress) + '%,0)';
                        }
                    });
                    timelines[pos+1].add(tween);
                });

                playCtrl.addEventListener('click', function() {  //给按钮绑定事件
                    if( word.getAttribute('data-state') === 'play' ) {
                        return false;
                    }
                    word.setAttribute('data-state', 'play');
                    playCtrl.className = 'control__button control__button--play control__button--active';
                    instance.hide({
                        duration: 0.6, delay: 0.1, easing: d3_ease.easeExpOut.ease,
                        callback: function() {
                            timelines[pos+1].start();
                            instance.show({callback : endPlayCallback});
                        }
                    });
                });
            });
        }
        init();
    }
</script>
</html>