gaoxizhi.github.io/index.html at master · gaoxizhi/gaoxizhi.github.io · 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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!Doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="gaoxizhi,gaox,高羲之">
    <link rel="icon" href="" type="image/x-icon">
    <title>gaox - 羲</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <!--引用jquery库-->
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>//定义获取词语下标
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            //点击body时触发事件
            $("body").click(function (e) {
                //需要显示的词语
                var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善", "高祥加油 !  ", "gaox");
                //设置词语给span标签
                var $i = $("<span/>").text(a[a_idx]);
                //下标等于原来下标+1  余 词语总数
                a_idx = (a_idx + 1) % a.length;
                //获取鼠标指针的位置，分别相对于文档的左和右边缘。
                //获取x和y的指针坐标
                var x = e.pageX,
                    y = e.pageY;
                //在鼠标的指针的位置给$i定义的span标签添加css样式
                $i.css({
                    "z-index": 999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#ff6651"
                });
                //在body添加这个标签
                $("body").append($i);
                //animate() 方法执行 CSS 属性集的自定义动画。
                //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
                //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
                $i.animate({
                    //将原来的位置向上移动360px
                    "top": y - 360,
                    "opacity": 0
                    //1500动画的速度
                },
                    1500,
                    function () {
                        //时间到了，动画结束，自动删除
                        $i.remove();
                    });
            });
        });</script>
</head>

<body>
    <div class="vi">
        <div class="sidebar">
            <div class="header">
                <h1>羲</h1>
                <div class="quote">
                    <p class="quote-text animate-init">
                        <span class="animate-init">强，</span>
                        <span class="animate-init"> 善，</span>
                        <span class="animate-init">广。</span>
                        <span class="animate-init"> 更高的追求！</span>
                    </p>
                </div>
            </div>
            <div class="menu">
                <p><a href="http://blog.gaozhaoxi.com" class="animate-init" rel="noopener noreferrer">Blog</a></p>
                <p><a href="https://github.com/gaoxizhi" class="animate-init"
                        rel="external nofollow noopener noreferrer">Github</a></p>
                <p><a href="mailto:gx@gaox.net" class="animate-init"
                        rel="external nofollow noopener noreferrer">Email</a></p>
                <p><a href="html/butterflies.html" class="animate-init"
                        rel="external nofollow noopener noreferrer">飞舞的蝴蝶</a></p>
                <p><a href="html/cat.html" class="animate-init" rel="external nofollow noopener noreferrer">围小猫</a></p>
            </div>
            <div class="location">
                <i class="location-icon"></i>
                <span class="location-text animate-init">HeZe - China</span>
            </div>
            <div class="relocating">
                Navigating to: <span class="relocate-location"></span>...
            </div>
        </div>

        <div class="content">
            <span class="close">close</span>
        </div>
    </div>
    <canvas width="1920" height="949"></canvas>
    <script>
        $(document).ready(function () {
            var delay = 1;
            var DELAY_STEP = 200;
            var animationOptions = { opacity: 1, top: 0 };

            $('h1').animate(animationOptions).promise()
                .pipe(animateMain)
                .pipe(animateLocationIcon);

            function animateMain() {
                var dfd = $.Deferred();
                var els = $('.animate-init');
                var size = els.size();

                els.each(function (index, el) {
                    delay++;
                    $(el).delay(index * DELAY_STEP)
                        .animate(animationOptions);
                    (size - 1 === index) && dfd.resolve();
                });
                return dfd.promise();
            }

            function animateLocationIcon() {
                $('.location-icon').delay(delay * DELAY_STEP).animate({
                    opacity: 1,
                    top: 0
                }).promise().done(animationQuote);
            }

            function animationQuote() { }
        });

        document.addEventListener('touchmove', function (e) {
            e.preventDefault()
        })
        var c = document.getElementsByTagName('canvas')[0],
            x = c.getContext('2d'),
            pr = window.devicePixelRatio || 1,
            w = window.innerWidth,
            h = window.innerHeight,
            f = 90,
            q,
            m = Math,
            r = 0,
            u = m.PI * 2,
            v = m.cos,
            z = m.random
        c.width = w * pr
        c.height = h * pr
        x.scale(pr, pr)
        x.globalAlpha = 0.6
        function i() {
            x.clearRect(0, 0, w, h)
            q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }]
            while (q[1].x < w + f) d(q[0], q[1])
        }
        function d(i, j) {
            x.beginPath()
            x.moveTo(i.x, i.y)
            x.lineTo(j.x, j.y)
            var k = j.x + (z() * 2 - 0.25) * f,
                n = y(j.y)
            x.lineTo(k, n)
            x.closePath()
            r -= u / -50
            x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
            x.fill()
            q[0] = q[1]
            q[1] = { x: k, y: n }
        }
        function y(p) {
            var t = p + (z() * 2 - 1.1) * f
            return (t > h || t < 0) ? y(p) : t
        }
        document.onclick = i
        document.ontouchstart = i
        i()
    </script>
</body>

</html>