forked from wttAndroid/web-resume
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (124 loc) · 4.95 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <meta http-equiv="Access-Control-Allow-Origin" content="*"> -->
<link rel="shortcut icon" href="./src/img/favicon.ico">
<title>夏珑桂_Web前端个人简历</title>
<!-- <title>Web前端个人简历</title> -->
<!-- ---------------CSS引用--------------------- -->
<link rel="stylesheet" href="lib/bootstrap.min.css"><!-- bootsarap -->
<link rel="stylesheet" href="lib/lizi/style.css"><!-- 粒子样式 -->
<link rel="stylesheet" href="src/css/base.min.css"><!-- 自己的CSS压缩版-->
</head>
<body>
<!-- ---------------JS--------------------- -->
<script src="lib/less.min.js"></script> <!-- less-->
<script src="lib/jquery.min.js"></script><!-- jq,bootsrap-->
<script src="lib/bootstrap.min.js"></script>
<script src="lib/handlebars.min.js"></script><!-- 模板引擎js -->
<script src="lib/lizi/particless.min.js"></script><!-- 粒子js -->
<!-- <link rel="import" href="html/main.html" id="boxs" /> -->
<!--主要内容html -->
<div id="box"></div>
<script type="module" crossorigin="use-credentials">
import configData from './src/config.js'; //加载配置文件
var arrMastering = configData.page4.proresslist;//部分模块数据的动态渲染
$('#box').load('html/main.html', function () {
//1、渲染模板
var html = $('#box').html();//获取内容模板
var template = Handlebars.compile(html); //编译
var htmls = template(configData);//渲染模板
$('#box').html(htmls);//写入模板
//2、事件监听
particlesJS.load('particles', 'lib/lizi/particles.json', function () { //加载粒子
console.log('callback - particles.js config loaded');
});
arrMastering = configData.page4.proresslist;//部分模块数据的动态渲染
window.addEventListener('scroll', scrollEvent) //对window滚动的监听
bindEvenInit(); //锚点定位初始化
});
// 原生link import兼容性检测代码
function supportsImports() {
return 'import' in document.createElement('link');
}
//锚点定位初始化
function bindEvenInit() {
$('.navbtn').bind("click touch", function () {
//scrollTop 滚动到 $(this).attr('href')锚点关联id所在位置
$('html,body').animate({ scrollTop: ($($(this).attr('href')).offset().top) }, 500)
return false
})
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
$('.element').on('click', function () {
$(this).popover('toggle')
})
$('#slideBut').on("click touch", function () {
$('#slideList').slideToggle(1000);
})
$('.navbtn').click(function () {
$('#slideList').css('display', 'none')
})
}
//播放音乐初始化方法
function audioInit() {
var audio = $('#audio').children('audio')[0];
if (audio) {
var audioControls = $('#audio').children('.audio-controls')[0]
if (audio) {
audio.volume = 0.05;//默认音量
$('#audioClick').click(function () {
if (audio.paused) {
audio.play();
audioControls.style.animationPlayState = "running"
$('#audioClick').addClass('icon-play_fill').removeClass('icon-zantingtingzhi')
} else {
audio.pause();
audioControls.style.animationPlayState = "paused"
$('#audioClick').addClass('icon-zantingtingzhi').removeClass('icon-play_fill')
}
})
}
}
}
//删除元素方法
function removeElement(_element) {
var _parentElement = _element.parentNode;
if (_parentElement) {
_parentElement.removeChild(_element);
}
}
//滚动事件监听
function scrollEvent() {
var vues = this;
var a, b, c;
a = $(window).height();//页面高度
b = $(window).scrollTop();//获取滚动高度
$('.page').each(function () {
c = $(this).offset().top;
var tag = true;
if (a + b - 120 > c) {
if (!$(this).find('.container').hasClass('animateload')) {
$(this).find('.container').addClass('animateload')
}
if ($(this)[0].id == 'page4' || tag) {
tag = false
$(this).find('.proress').each(function (i, n) {
$(this).find('.bar-propress')[0].style.width = arrMastering[i].value;
$(this).find('.propress-title').text(arrMastering[i].title);
$(this).find('.bar-propress').children('span').text(arrMastering[i].value)
})
}
} else {
// if($(this).find('.container').hasClass('animateload')) {$(this).find('.container').removeClass('animateload')}
}
})
}
</script>
</body>
</html>