jQuery动画效果实现代码
0
0
2026年7月5日
CSS Grid布局
.grid {
display: grid;
gap: 20px;
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-span-2 {
grid-column: span 2;
}
.grid-row-span-2 {
grid-row: span 2;
}
.grid-center {
display: grid;
place-items: center;
}
.grid-auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}HTML5语义化标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化页面</title>
</head>
<body>
<header>
<nav>
<h1>网站标题</h1>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<figure>
<img src="image.jpg" alt="图片">
<figcaption>图片说明</figcaption>
</figure>
</article>
<aside>
<h3>侧边栏</h3>
</aside>
</main>
<footer>
<p>© 2024 版权所有</p>
</footer>
</body>
</html>Flexbox工具类
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}CSS动画效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}
.slide-up {
animation: slideUp 0.4s ease-out;
}
.spin {
animation: spin 1s linear infinite;
}
.transition-all {
transition: all 0.3s ease;
}防抖节流详细实现
// 防抖
function debounce(fn, wait = 300, immediate = false) {
let timer = null;
let result;
const debounced = function(...args) {
if (timer) clearTimeout(timer);
if (immediate) {
const callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) result = fn.apply(this, args);
} else {
timer = setTimeout(() => {
fn.apply(this, args);
}, wait);
}
return result;
};
debounced.cancel = function() {
clearTimeout(timer);
timer = null;
};
return debounced;
}
// 节流
function throttle(fn, wait = 300) {
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous >= wait) {
previous = now;
fn.apply(this, args);
}
};
}表单验证
class FormValidator {
constructor(formId) {
this.form = document.getElementById(formId);
this.rules = {};
this.errors = {};
}
addRule(field, rules) {
this.rules[field] = rules;
}
validate() {
this.errors = {};
for (let field in this.rules) {
const value = this.form[field].value;
for (let rule of this.rules[field]) {
if (!this.checkRule(value, rule)) {
this.errors[field] = rule.message;
break;
}
}
}
return Object.keys(this.errors).length === 0;
}
checkRule(value, rule) {
switch (rule.type) {
case 'required':
return value.trim() !== '';
case 'email':
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
case 'minLength':
return value.length >= rule.min;
default:
return true;
}
}
}技术分享，欢迎评论区交流讨论。
在线咨询
上一个应该是我，我买了一年，实在没价值，...