-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (97 loc) · 2.78 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="never">
<title>mozik</title>
<script src="./static/reset.js"></script>
<script src="./static/myQuery.js"></script>
<link href="./static/animate.css" rel="stylesheet">
<link href="./static/iconfont.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
html,body{
width: 100%;
height: 100%;
overflow: hidden
}
ul, ol, li {
list-style: none
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
/**
* 长按事件
* 首页长按 底部出现切换背景的tab
* */
let masked = document.querySelector('.masked')
let masked2 = document.querySelector('.masked2')
let changeBg = document.querySelector('.changeBg')
let bgList = document.querySelector('.bgList')
// 获取 changeBg 的样式表
let sty = changeBg.currentStyle || window.getComputedStyle(changeBg, null)
// 获取 bgList 的样式表
let bgSty = bgList.currentStyle || window.getComputedStyle(bgList, null)
// 获取可视窗口的实际高度 宽度
let h = document.documentElement.clientHeight
// show tab
$('.Home').longTag(function () {
console.log(999)
masked.style.display = 'block'
let timer = setInterval(show, 10)
const i = 1.9
function show () {
changeBg.style.bottom = parseInt(sty.bottom) + i + 'px'
if (parseInt(sty.bottom) === 0) {
clearInterval(timer)
}
}
})
// hide tab
$('.masked').tap(function () {
masked.style.display = 'none'
let timer = setInterval(hide, 10)
const j = -1.9
function hide () {
changeBg.style.bottom = parseInt(sty.bottom) + j + 'px'
if (parseInt(sty.bottom) <= -0.1 * h) {
clearInterval(timer)
}
}
})
// show all background image list
$('.btn-bg').tap(function () {
masked2.style.display = 'block'
let timer = setInterval(show, 10)
const k = 1.9
function show () {
bgList.style.bottom = parseInt(bgSty.bottom) + k + 'px'
if (parseInt(bgSty.bottom) === 0) {
clearInterval(timer)
}
}
})
// hide all background image list
$('.masked2').tap(function () {
masked2.style.display = 'none'
let timer = setInterval(hide, 10)
const n = -1.9
function hide () {
bgList.style.bottom = parseInt(bgSty.bottom) + n + 'px'
if (parseInt(bgSty.bottom) <= -0.15 * h) {
clearInterval(timer)
}
}
})
</script>
</html>