User:BlackTea67/J-Tool

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

// 创建一个新的style元素来添加CSS
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
    #circle-button {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;
        border: none;
        cursor: pointer;
        outline: none;
    }
    #circle-button img {
        width: 30px;
        height: 30px; /* 确保图标大小合适 */
    }
    .draggable-window {
    position: fixed; /* 使用fixed定位 */
    top: 50%;
    right: 80px; /* 初始位置在按钮右侧，根据按钮大小调整 */
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    display: none;
    z-index: 100;
   }
    .draggable-window .title-bar {
        cursor: move;
        margin: -10px;
        margin-bottom: 10px;
        background-color: #eee;
        padding: 5px;
        user-select: none;
    }
`;
document.head.appendChild(style);

// 创建按钮元素
var button = document.createElement('button');
button.id = 'circle-button';
button.innerHTML = '<img src="https://en.wikipedia.org/favicon.ico" alt="Wikipedia Icon">';

// 将按钮添加到body元素中
document.body.appendChild(button);

// 创建可拖动的窗口元素
var draggableWindow = document.createElement('div');
draggableWindow.id = 'draggable-window';
draggableWindow.className = 'draggable-window';
draggableWindow.innerHTML = '<div class="title-bar">J-Tool</div>我是一个窗口...';
draggableWindow.style.display = 'none'; // 确保窗口初始不显示

// 将可拖动的窗口添加到body元素中
document.body.appendChild(draggableWindow);

// 添加一个标志来记录窗口是否已经初始化过位置
var isWindowPositionInitialized = false;

// 为按钮添加点击事件，点击时切换窗口的显示状态
button.addEventListener('click', function() {
    // 检查窗口是否已经显示
    if (draggableWindow.style.display === 'none') {
        // 显示窗口
        draggableWindow.style.display = 'block';
        
        // 只有在窗口位置未初始化时，才计算并设置位置
        if (!isWindowPositionInitialized) {
            // 初始化窗口位置
            var buttonBounds = button.getBoundingClientRect();
            // 计算窗口的top值，使其出现在按钮的正上方并垂直居中对齐
            draggableWindow.style.top = (buttonBounds.bottom + window.pageYOffset - draggableWindow.offsetHeight / 2) + 'px';
            // 计算窗口的left值，使其出现在按钮的左侧
            draggableWindow.style.left = (buttonBounds.left + window.pageXOffset - draggableWindow.offsetWidth - 10) + 'px'; // 减去10px作为间隔
            // 更新标志，表示窗口位置已初始化
            isWindowPositionInitialized = true;
        }
    } else {
        // 如果窗口已显示，则隐藏窗口
        draggableWindow.style.display = 'none';
    }
});

// 变量来跟踪拖动状态
var isDragging = false;
var dragStartX, dragStartY, dragStartPosLeft, dragStartPosTop;

// 为标题栏添加拖动功能
var titleBar = draggableWindow.querySelector('.title-bar');
titleBar.addEventListener('mousedown', function(event) {
    if (event.target === titleBar) { // 检查是否是标题栏被按下
        isDragging = true;
        dragStartX = event.clientX;
        dragStartY = event.clientY;
        dragStartPosLeft = draggableWindow.offsetLeft;
        dragStartPosTop = draggableWindow.offsetTop;
        event.preventDefault(); // 阻止默认行为
    }
});

// 监听鼠标移动和释放事件来处理拖动
document.addEventListener('mousemove', function(event) {
    if (isDragging) {
        var dx = event.clientX - dragStartX;
        var dy = event.clientY - dragStartY;
        draggableWindow.style.left = dragStartPosLeft + dx + 'px';
        draggableWindow.style.top = dragStartPosTop + dy + 'px';
    }
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});