54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
(function () {
|
|
let botWindow = document.createElement("div");
|
|
botWindow.id = "floating-bot";
|
|
botWindow.innerHTML = `
|
|
<div id="bot-header">🤖 小机器人</div>
|
|
<div id="bot-body">你好！我是你的网页助手。</div>
|
|
`;
|
|
document.body.appendChild(botWindow);
|
|
|
|
let style = document.createElement("style");
|
|
style.innerHTML = `
|
|
#floating-bot {
|
|
position: fixed;
|
|
width: 200px;
|
|
height: 150px;
|
|
bottom: 50px;
|
|
right: 50px;
|
|
background: white;
|
|
border: 2px solid #ccc;
|
|
border-radius: 10px;
|
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
|
z-index: 9999;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
#bot-header {
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 10px;
|
|
cursor: move;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
#bot-body {
|
|
padding: 10px;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
let isDragging = false, offsetX, offsetY;
|
|
botWindow.querySelector("#bot-header").addEventListener("mousedown", (e) => {
|
|
isDragging = true;
|
|
offsetX = e.clientX - botWindow.offsetLeft;
|
|
offsetY = e.clientY - botWindow.offsetTop;
|
|
});
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (isDragging) {
|
|
botWindow.style.left = `${e.clientX - offsetX}px`;
|
|
botWindow.style.top = `${e.clientY - offsetY}px`;
|
|
}
|
|
});
|
|
document.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
});
|
|
})(); |