chatgpt帮我写的一个小程序气泡框代码,支持自定义气泡框内的内容,自动计算气泡定
时间: 2023-08-24 16:02:15 浏览: 84
以下是一个示例的小程序气泡框代码,支持自定义气泡框内的内容和自动计算气泡的位置。
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置气泡框的样式 */
.bubble {
background-color: #f9f9f9;
border-radius: 10px;
padding: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
position: absolute;
}
/* 设置气泡尖角的样式 */
.bubble::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f9f9f9 transparent;
}
</style>
</head>
<body>
<div id="bubbleContainer"></div>
<script>
// 自定义气泡框内容和位置的函数
function createBubble(content, x, y) {
var bubbleContainer = document.getElementById("bubbleContainer");
// 创建气泡框元素
var bubble = document.createElement("div");
bubble.className = "bubble";
bubble.textContent = content;
// 自动计算气泡框位置
bubble.style.left = x + "px";
bubble.style.top = y + "px";
// 将气泡框添加到容器中
bubbleContainer.appendChild(bubble);
}
// 示例调用
createBubble("这是一个气泡框示例", 100, 100);
</script>
</body>
</html>
```
你可以将以上代码保存为一个`.html`文件,在浏览器中打开,即可看到一个显示自定义内容的气泡框,并且可以通过自动计算设置气泡框的位置。