Polub 0
Zforkuj 0

Ostatnio aktywny 1 month ago

Hudi zrewidował ten Gist 1 month ago. Przejdź do rewizji

1 file changed, 256 insertions

留言界面js(stworzono plik)

@@ -0,0 +1,256 @@
1 + function initPages() {
2 + const cards = document.querySelectorAll('.animate-card');
3 + const wrapper = document.querySelector('.animation-wrapper');
4 + const finalCard = document.querySelector('.final-card')
5 + const newest_comment=loadData("newest_comment",10)
6 + // 定义所有可能的飞入动画
7 + const flyAnimations = [
8 + 'flyFromTopLeft',
9 + 'flyFromTopRight',
10 + 'flyFromBottomLeft',
11 + 'flyFromBottomRight',
12 + 'flyFromLeft',
13 + 'flyFromRight',
14 + 'flyFromTop',
15 + 'flyFromBottom'
16 + ]
17 + if (newest_comment === null || newest_comment.length <=0){
18 + fillFakeCard(flyAnimations,wrapper,finalCard)
19 + return
20 + }
21 + // 初始化动画卡片
22 + for (let i = 0; i < newest_comment.length; i++) {
23 + const item = newest_comment[i]
24 + const card_container =document.createElement("div")
25 + const card_ = getRandomCard()
26 + card_container.classList.add("message-container",'animate-card',card_)
27 + card_container.innerHTML = `
28 + <div class="fake-content">
29 + <div class="fake-image"><img src="${item.avatar}" alt=""></div>
30 + <div class="fake-text">
31 + <div class="fake-title">${item.nick}</div>
32 + <div class="fake-lines">
33 + <div class="fake-line">${removeHTMLTags(item.content)}</div>
34 + <div class="fake-line">${formatDateTime(new Date(item.date))}</div>
35 + </div>
36 + </div>
37 + </div>
38 + `
39 + // wrapper.append(card_container)
40 + const baseColor = getRandomPastelColor();
41 + const contrastColor = getContrastColor(baseColor);
42 + card_container.style.backgroundColor = baseColor.toString();
43 + const fakeContent = card_container.querySelector('.fake-content');
44 + if (fakeContent) {
45 + fakeContent.style.backgroundColor = contrastColor;
46 +
47 + // 为内部元素设置基础颜色（形成反向对比）
48 + const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line');
49 + elements.forEach(element => {
50 + element.style.backgroundColor = baseColor.toString();
51 + });
52 + }
53 + const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)];
54 + const delay = i * 0.2;
55 + card_container.style.animationDelay = `${delay}s`;
56 + card_container.style.animationName = randomAnimation;
57 + card_container.addEventListener('animationend', function() {
58 + this.style.animation = 'none';
59 +
60 + const position = getRandomPosition(this,wrapper);
61 + const rotation = (Math.random() - 0.5) * 40;
62 + const scale = 0.8 + Math.random() * 0.4;
63 +
64 + this.style.position = 'absolute';
65 + this.style.left = position.x + 'px';
66 + this.style.top = position.y + 'px';
67 + this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
68 + this.style.transition = 'all 0.3s ease';
69 + this.style.opacity = '1';
70 + this.style.visibility = 'visible';
71 +
72 + // 添加鼠标悬停效果
73 + this.addEventListener('mouseover', function() {
74 + this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`; // 增加放大倍数
75 + this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)'; // 增加阴影
76 + this.style.zIndex = '81';
77 + this.style.cursor = 'pointer';
78 + this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 添加平滑过渡
79 + // 隐藏final-card
80 + finalCard.style.visibility = 'hidden';
81 + });
82 +
83 + // 添加鼠标移出效果
84 + this.addEventListener('mouseout', function() {
85 + this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
86 + this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)';
87 + this.style.zIndex = '80'; // 恢复原来的层级
88 + this.style.cursor = 'default';
89 + this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
90 + // 显示final-card
91 + finalCard.style.visibility = 'visible';
92 + });
93 + });
94 + wrapper.append(card_container)
95 + }
96 + }
97 +
98 + function getRandomCard() {
99 + const cards = ["card-1","card-2","card-3","card-4","card-5","card-6","card-7","card-8","card-9","card-10"];
100 + return cards[Math.floor(Math.random() * cards.length)];
101 + }
102 +
103 + function getRandomPastelColor() {
104 + return {
105 + hue: Math.floor(Math.random() * 360),
106 + saturation: 40 + Math.random() * 20,
107 + lightness: 92 + Math.random() * 6,
108 + toString() {
109 + return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;
110 + }
111 + };
112 + }
113 +
114 + function formatDateTime(date) {
115 + var y = date.getFullYear();
116 + var m = date.getMonth() + 1;
117 + m = m < 10 ? ('0' + m) : m;
118 + var d = date.getDate();
119 + d = d < 10 ? ('0' + d) : d;
120 + var h = date.getHours();
121 + h = h < 10 ? ('0' + h) : h;
122 + var minute = date.getMinutes();
123 + minute = minute < 10 ? ('0' + minute) : minute;
124 + var second = date.getSeconds();
125 + second = second < 10 ? ('0' + second) : second;
126 + return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
127 + }
128 +
129 + function fillFakeCard(flyAnimations,wrapper,finalCard) {
130 + const number = 10
131 + for (let i = 0; i < number; i++) {
132 + const card_container =document.createElement("div")
133 + const card_ = getRandomCard()
134 + card_container.classList.add("message-container",'animate-card',card_)
135 + card_container.innerHTML = `
136 + <div class="fake-content">
137 + <div class="fake-image"></div>
138 + <div class="fake-text">
139 + <div class="fake-title"></div>
140 + <div class="fake-lines">
141 + <div class="fake-line"></div>
142 + <div class="fake-line"></div>
143 + </div>
144 + </div>
145 + </div>
146 + `
147 + const baseColor = getRandomPastelColor();
148 + const contrastColor = getContrastColor(baseColor);
149 +
150 + // 设置卡片背景色
151 + card_container.style.backgroundColor = baseColor.toString();
152 +
153 + // 为内容区域设置对比色
154 + const fakeContent = card_container.querySelector('.fake-content');
155 + if (fakeContent) {
156 + fakeContent.style.backgroundColor = contrastColor;
157 +
158 + // 为内部元素设置基础颜色（形成反向对比）
159 + const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line');
160 + elements.forEach(element => {
161 + element.style.backgroundColor = baseColor.toString();
162 + });
163 + }
164 +
165 + // 随机选择一个飞入动画
166 + const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)];
167 + const delay = i * 0.2;
168 + card_container.style.animationDelay = `${delay}s`;
169 + card_container.style.animationName = randomAnimation;
170 +
171 + card_container.addEventListener('animationend', function() {
172 + this.style.animation = 'none';
173 +
174 + const position = getRandomPosition(this,wrapper);
175 + const rotation = (Math.random() - 0.5) * 40;
176 + const scale = 0.8 + Math.random() * 0.4;
177 +
178 + this.style.position = 'absolute';
179 + this.style.left = position.x + 'px';
180 + this.style.top = position.y + 'px';
181 + this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
182 + this.style.transition = 'all 0.3s ease';
183 + this.style.opacity = '1';
184 + this.style.visibility = 'visible';
185 +
186 + // 添加鼠标悬停效果
187 + this.addEventListener('mouseover', function() {
188 + this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`; // 增加放大倍数
189 + this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)'; // 增加阴影
190 + this.style.zIndex = '2002';
191 + this.style.cursor = 'pointer';
192 + this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 添加平滑过渡
193 + // 隐藏final-card
194 + finalCard.style.visibility = 'hidden';
195 + });
196 +
197 + // 添加鼠标移出效果
198 + this.addEventListener('mouseout', function() {
199 + this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
200 + this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)';
201 + this.style.zIndex = '1001'; // 恢复原来的层级
202 + this.style.cursor = 'default';
203 + this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
204 + // 显示final-card
205 + finalCard.style.visibility = 'visible';
206 + });
207 + });
208 + wrapper.append(card_container)
209 + }
210 +
211 + }
212 +
213 + function removeHTMLTags(str) {
214 + return str.replace(/<[^>]*>/g, ' ');
215 + }
216 +
217 + function getRandomPosition(element,wrapper) {
218 + const wrapperRect = wrapper.getBoundingClientRect();
219 + const elementRect = element.getBoundingClientRect();
220 +
221 + const maxX = wrapperRect.width - elementRect.width;
222 + const maxY = wrapperRect.height - elementRect.height;
223 +
224 + const randomX = Math.random() * maxX;
225 + const randomY = Math.random() * maxY;
226 +
227 + return { x: randomX, y: randomY };
228 + }
229 + function getContrastColor(baseColor) {
230 + const contrastHue = (baseColor.hue + 180) % 360;
231 + const contrastSaturation = Math.min(baseColor.saturation + 10, 60);
232 + const contrastLightness = Math.max(baseColor.lightness - 8, 85);
233 + return `hsl(${contrastHue}, ${contrastSaturation}%, ${contrastLightness}%)`;
234 + }
235 +
236 +
237 + // 取数据
238 + function loadData(name, time) {
239 + let d = JSON.parse(localStorage.getItem(name));
240 + // 过期或有错误返回 0 否则返回数据
241 + if (d) {
242 + let t = Date.now() - d.time
243 + if (-1 < t && t < (time * 60000)) return d.data;
244 + }
245 + return null;
246 + };
247 +
248 + function init(){
249 + const path = window.location.pathname;
250 + if (path === '/messages/') {
251 + initPages()
252 + }else {
253 + return
254 + }
255 + }
256 + init()
Nowsze Starsze

Obsługiwane przez Opengist ⋅ Load: 16ms⋅

Polski