-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathzener.html
138 lines (136 loc) · 4.13 KB
/
zener.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
<!DOCTYPE html>
<html>
<head>
<title>zener</title>
<style>
@font-face {
font-family: 'MedievalSharp-BoldOblique';
src: url('MedievalSharp-BoldOblique.ttf');
}
p {
font-size: 18px;
}
body {
font-family: 'MedievalSharp-BoldOblique', Arial, sans-serif;
background-color: #ffffff;
}
.container {
width: 80%;
margin: auto;
}
.header, .footer {
text-align: center;
padding: 20px;
background-color: #ede6e6;
}
nav ul {
list-style-type: none;
padding: 0;
text-align: center;
margin-bottom: 20px;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: black;
}
.content {
padding: 20px;
text-align: center;
}
#mainImage {
width: 100%;
height: auto;
margin-bottom: 20px;
}
#mainImage {
width: 100%;
height: 70vh; /* 设置主图片的高度为视口高度的 70% */
object-fit: contain; /* 保持图片的宽高比 */
margin-bottom: 20px;
}
.thumbnails {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.thumbnail {
width: 10%;
height: 10vh;
object-fit: contain;
height: auto;
cursor: pointer;
transition: opacity 0.3s;
}
.thumbnail:hover {
opacity: 0.5; /* 鼠标悬浮时设置为半透明 */
}
a:hover {
opacity: 0.5; /* 鼠标悬浮时设置为半透明 */
}
.content a {
color: black;
text-decoration: none;
}
.large-text {
font-size: 24px; /* 大字体 */
}
.small-text {
font-size: 20px; /* 小字体 */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Zener Click</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Products</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="purchase.html">Purchase</a></li>
</ul>
</nav>
<img id="mainImage" src="zener1.jpg" alt="主图片">
<div class="thumbnails">
<img class="thumbnail" src="zener1.jpg" alt="缩略图1">
<img class="thumbnail" src="zener2.jpg" alt="缩略图2">
<img class="thumbnail" src="zener3.jpg" alt="缩略图3">
<img class="thumbnail" src="zener4.jpg" alt="缩略图4">
</div>
<script>
var thumbnails = document.querySelectorAll('.thumbnail');
var mainImage = document.getElementById('mainImage');
thumbnails.forEach(function(thumbnail) {
thumbnail.addEventListener('click', function() {
mainImage.src = this.src;
});
});
</script>
<p>
一个以齐纳管击穿噪音为基础的无源鼓机，不需要外接电源，三个输入口支持trig、gate、音频等电压信号，只需要电压高于3.3v。
三个输入暴力混合并相互打架干涉，在输出口得到变化的节奏。旋钮调整输出音量。
zener click是开发hadouken过程中的一个副产物。
</p>
<div class="content">
<p>
</p>
<video width="640" height="480" controls>
<source src="zener1.mp4" type="video/mp4">
</video>
</div>
<div class="footer">
<p><span class="transparent">Copyright Ear © 2024</span></p>
<style>
.transparent {
opacity: 0.5; /* 透明度设置为 0.5，也就是 50% */
}
</style>
</div>
</div>
</body>
</html>