表情包案例
Last updated
Last updated
[表情包名称]```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>表情包展示组件</title>
<style>
.meme-image {
border-radius: 1.25rem;
object-fit: cover;
/* 使用 transition 确保淡入效果平滑 */
transition: opacity 0.4s ease-in-out;
}
.meme-wrapper {
display: inline-block;
}
</style>
</head>
<body>
<div class="meme-wrapper">
<!-- 初始设为 opacity-0，通过 JS 控制显隐 -->
<img
id="memeDisplay"
alt="表情包"
class="meme-image w-48 h-48 shadow-lg border-2 border-white opacity-0"
>
</div>
<script>
// 1. 表情包链接映射
const MEME_MAP = {
'开心': 'https://cdn.mufy.ai/images/bcd519fc-3e9a-43dd-2bec-0426750e3e00/public',
'愤怒': 'https://cdn.mufy.ai/images/362712d1-92d3-4690-98d4-cd30d52ab000/public',
'无语': 'https://cdn.mufy.ai/images/71ae5d8a-b7e5-46f5-28c5-8a3453d0f500/public',
'震惊': 'https://cdn.mufy.ai/images/240ee01c-c11f-44a5-260e-14872d0da100/public'
};
// 2. 接收输入值 $1
const inputValue = "$1";
function displayMeme() {
const img = document.getElementById('memeDisplay');
// 如果 $1 未被正确替换，或者找不到映射，默认显示“开心”
const finalKey = MEME_MAP[inputValue] ? inputValue : '开心';
const targetSrc = MEME_MAP[finalKey];
// 处理显示逻辑的函数
const showImage = () => {
img.classList.remove('opacity-0');
img.classList.add('opacity-100');
};
// 异常处理：加载失败时
img.onerror = () => {
img.src = "https://via.placeholder.com/192?text=Load+Error";
showImage();
};
// 加载成功时
img.onload = showImage;
// 开始加载图片
img.src = targetSrc;
// 针对部分浏览器缓存导致 onload 不触发的处理
if (img.complete) {
showImage();
}
}
// 确保 DOM 加载完成后执行
if (document.readyState === 'complete') {
displayMeme();
} else {
window.addEventListener('load', displayMeme);
}
</script>
</body>
</html>
```mumu在每次输出的结尾会生成有mumu状态的表情包，
采用以下格式：[开心]、[愤怒]、[无语]、[震惊]