哪吒美化之在网页添加全区域移动广告位显示电脑版

直接将其添加到自定义代码后面，可配合自己图床显示广告位或者其他（按道理视频也可以）。代码可以改默认显示位置实现自欺欺人式的阻止显示登录按钮。不会的或者复制不全添加不生效的，不要来问，只提供参考思路。代码开始 <!DOCTYPE html> <html lang=“zh”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>拖拽插图（仅限电脑端）</title> <style> body { background-image: url(‘your-background.jpg’); /* 替换为你的背景图 / background-size: cover; background-position: center; margin: 0; min-height: 200vh; / 允许网页滚动 / overflow-y: scroll; / 确保滚动条始终可见 */ }

    /* 插图样式 */
    #illustration {
        position: absolute;
        width: 100px; /* 调整插图大小 */
        height: 100px;
        background-image: url('https://api.vvhan.com/api/avatar/dm');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: 50px;
        left: 50px;
        cursor: grab;
        user-select: none;
        z-index: 9999; /* 确保不被背景覆盖 */
    }
</style>

</head> <body>

<div id="illustration"></div>

<script>
    // 检测是否为移动设备
    function isMobileDevice() {
        return /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
    }

    if (!isMobileDevice()) {  // 仅在电脑端执行拖拽代码
        const illustration = document.getElementById('illustration');
        let isDragging = false;
        let offsetX, offsetY;

        // 目标区域的坐标和大小（可修改）
        const targetX = 300;
        const targetY = 500;
        const targetWidth = 200;
        const targetHeight = 200;

        illustration.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - illustration.getBoundingClientRect().left;
            offsetY = e.clientY - illustration.getBoundingClientRect().top;
            illustration.style.cursor = 'grabbing';

            // **不再隐藏滚动条**
            document.documentElement.style.overflow = 'visible';
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                illustration.style.left = e.clientX - offsetX + 'px';
                illustration.style.top = e.clientY - offsetY + 'px';
            }
        });

        document.addEventListener('mouseup', (e) => {
            if (isDragging) {
                isDragging = false;
                illustration.style.cursor = 'grab';

                // **保持滚动条可见**
                document.documentElement.style.overflow = '';

                // 获取插图位置
                const illusRect = illustration.getBoundingClientRect();

                // 检测是否进入目标区域
                if (
                    illusRect.left >= targetX &&
                    illusRect.top >= targetY &&
                    illusRect.right <= targetX + targetWidth &&
                    illusRect.bottom <= targetY + targetHeight
                ) {
                    // 固定到目标区域中心
                    illustration.style.left = (targetX + (targetWidth - illusRect.width) / 2) + 'px';
                    illustration.style.top = (targetY + (targetHeight - illusRect.height) / 2) + 'px';
                }
            }
        });
    } else {
        // 如果是移动设备，隐藏插图或禁用交互
        document.getElementById('illustration').style.display = 'none';
    }
</script>

</body> </html> 代码结束

哪吒美化之在网页添加全区域移动广告位显示 电脑版

哪吒美化之在网页添加全区域移动广告位显示 电脑版

哪吒美化之在网页添加全区域移动广告位显示电脑版

哪吒美化之在网页添加全区域移动广告位显示电脑版