文章详情
静态html表情面板例子
Posted on 2021-05-05 00:29:12 by 主打一个C++
<!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>
<button class="emoji-button" id="emojiButton">打开表情面板</button>
<div class="emoji_result" id="emoji_result">
<p>选择的表情将显示在这里</p>
</div>
<style>
.emoji-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
.emoji-button:hover {
background-color: #45a049;
}
.emoji-panel {
position: fixed;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
padding: 10px;
display: none;
z-index: 1000;
min-width: 200px;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.emoji-item {
font-size: 24px;
cursor: pointer;
text-align: center;
padding: 5px;
border-radius: 4px;
}
.emoji-item:hover {
background-color: #f0f0f0;
}
.emoji_result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
<script>
(function () {
// 表情数据
const emojis = [
'😀', '😃', '😄', '😁', '😆',
'😅', '😂', '🤣', '😊', '😇',
'🙂', '🙃', '😉', '😌', '😍',
'🥰', '😘', '😗', '😙', '😚',
'😋', '😛', '😝', '😜', '🤪',
'🤨', '🧐', '🤓', '😎', '🤩',
'🥳', '🙇', '🤗', '🌹', '🤝',
];
// 创建表情面板
function createEmojiPanel() {
const panel = document.createElement('div');
panel.className = 'emoji-panel';
panel.id = 'emojiPanel';
const grid = document.createElement('div');
grid.className = 'emoji-grid';
emojis.forEach(emoji => {
const item = document.createElement('div');
item.className = 'emoji-item';
item.textContent = emoji;
item.dataset.emoji = emoji;
item.addEventListener('click', function () {
selectEmoji(emoji);
});
grid.appendChild(item);
});
panel.appendChild(grid);
document.body.appendChild(panel);
return panel;
}
// 显示表情面板
function showEmojiPanel(x, y) {
let panel = document.getElementById('emojiPanel');
if (!panel) {
panel = createEmojiPanel();
}
// 设置面板位置，使其出现在鼠标上方
panel.style.left = x + 'px';
panel.style.top = (y - panel.offsetHeight - 10) + 'px';
panel.style.display = 'block';
// 点击面板外部关闭面板
document.addEventListener('click', closeEmojiPanelOnClickOutside);
}
// 关闭表情面板
function closeEmojiPanel() {
const panel = document.getElementById('emojiPanel');
if (panel) {
panel.style.display = 'none';
}
document.removeEventListener('click', closeEmojiPanelOnClickOutside);
}
// 点击外部关闭面板
function closeEmojiPanelOnClickOutside(event) {
const panel = document.getElementById('emojiPanel');
const button = document.getElementById('emojiButton');
if (panel && !panel.contains(event.target) && event.target !== button) {
closeEmojiPanel();
}
}
// 选择表情
function selectEmoji(emoji) {
console.log('选择的表情:', emoji);
// 显示结果
const emoji_result = document.getElementById('emoji_result');
emoji_result.innerHTML = `<p>选择的表情: <span style="font-size: 24px;">${emoji}</span></p>`;
// 关闭面板
closeEmojiPanel();
}
// 绑定按钮点击事件
document.getElementById('emojiButton').addEventListener('click', function (event) {
event.stopPropagation(); // 阻止事件冒泡
// 获取鼠标位置
const x = event.clientX;
const y = event.clientY;
showEmojiPanel(x, y);
});
})();
</script>
</body>
</html>
