-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (71 loc) · 2.32 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
<!DOCTYPE html>
<html lang="en" id="pol">
<head id="headDom">
<meta charset="UTF-8">
<title>pol-yuan</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="content">
<div class="content-box">
<section id="aboutMe">
我是关于我
</section>
<section id="repo">
我是项目列表
</section>
<section id="blog">
我是随笔
</section>
</div>
</div>
<!-- 头部 -->
<header id="header">
<div class="logo">
<div class="layout">
<div class="logo-box"><a href="#">pol-Yuan</a></div>
</div>
</div>
<div class="show-box">
<div class="layout">
<div id="welcome">
<p class="row info1">My name is polly Yuan</p>
<p class="row info2">欢迎来到袁野的个人网站</p>
</div>
</div>
</div>
</header>
<a class="slide-btn slide-up" icon ></a>
<nav id="mainNav">
<ul class="layout">
<li><a href="#" data-index="0"><i icon class="nav-aboutMe"></i><span>关于我</span></a></li>
<li><a href="#" data-index="1"><i icon class="nav-repo"></i><span>项目清单</span></a></li>
<li><a href="#" data-index="2"><i icon class="nav-blog"></i><span>随笔</span></a></li>
</ul>
</nav>
</body>
</html>
<script>
var startPos = {x: 0, y: 0, time: +new Date};
var isScrolling = 0;// 记录是垂直滚动还是水平滚动
document.addEventListener('touchstart', function(event){
var touch = event.targetTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
startPos.x = touch.pageX;
startPos.y = touch.pageY;
}, false);
document.addEventListener('touchmove', function(event){
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touchmove = event.targetTouches[0];
var endPos = {x:touchmove.pageX - startPos.x, y: touchmove.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling === 0){
event.preventDefault();
}
}, false);
</script>
<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/page.js"></script>
<script src="js/index.js"></script>