_

📅️ 发表于 2024-09-04 | 📝 更新于 2024-09-04 | 📜 0 评论 | 👁️ 41 阅读
网络技巧 网站源码

9月4日我花了一点时间写的纯js表达的代码(没有一点杂质),主要是为了适配永硕E盘,特此记录下来。次代码可以经过进一步改造,修改成各种类型的东西,比如公告弹窗等等。css样式比较简易,不满意的同志可自行修改。

食用方法

将代码全部复制,粘贴到你的网站页面(html或者php文件)中。

效果图

QQ截图20240904165837.jpg

代码

        <script>
        // 创建悬浮广告容器
        var adContainer = document.createElement('div');
        adContainer.id = 'floatingAd';
        document.body.appendChild(adContainer);

        // 创建广告内容容器
        var adContent = document.createElement('div');
        adContent.id = 'floatingAdContent';
        adContainer.appendChild(adContent);

        // 创建关闭按钮
        var closeBtn = document.createElement('div');
        closeBtn.id = 'closeBtn';
        closeBtn.innerHTML = '&times;';
        adContainer.appendChild(closeBtn);

        // 创建广告标题
        var adTitle = document.createElement('h2');
        adTitle.innerText = '侠盒分享博客!'; // 主标题
        adContent.appendChild(adTitle);

        // 创建广告描述
        var adText = document.createElement('p');
        adText.innerText = '杂七杂八,经常更新。'; // 次标题(或内容)
        adContent.appendChild(adText);

        // 创建广告链接
        var adLink = document.createElement('a');
        adLink.href = '...'; // 你的网址
        adLink.target = '_blank'; // 在新标签页中打开链接
        adLink.innerText = '了解更多';
        adContent.appendChild(adLink);

        // 添加广告容器的样式
        adContainer.style.width = '320px';
        adContainer.style.height = '180px';
        adContainer.style.position = 'fixed';
        adContainer.style.bottom = '20px';
        adContainer.style.right = '10px';
        adContainer.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.3)';
        adContainer.style.zIndex = '9999';
        adContainer.style.borderRadius = '12px';
        adContainer.style.overflow = 'hidden';
        adContainer.style.backgroundImage = 'url("...")'; // 替换为你的背景图链接
        adContainer.style.backgroundSize = 'cover';
        adContainer.style.backgroundPosition = 'center';
        adContainer.style.color = 'white';
        adContainer.style.display = 'flex';
        adContainer.style.flexDirection = 'column';
        adContainer.style.justifyContent = 'space-between';
        adContainer.style.animation = 'fadeIn 0.5s ease-in-out';

        // 添加广告内容的样式
        adContent.style.padding = '40px';
        adContent.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'; // 半透明背景,使文字更清晰
        adContent.style.borderRadius = '0 0 12px 12px';
        adContent.style.textAlign = 'center';

        // 添加标题的样式
        adTitle.style.margin = '0';
        adTitle.style.fontSize = '20px';
        adTitle.style.fontWeight = 'bold';

        // 添加描述的样式
        adText.style.margin = '10px 0 0';
        adText.style.fontSize = '14px';

        // 添加链接的样式
        adLink.style.display = 'inline-block';
        adLink.style.marginTop = '10px';
        adLink.style.padding = '8px 16px';
        adLink.style.backgroundColor = '#ff5722';
        adLink.style.color = 'white';
        adLink.style.textDecoration = 'none';
        adLink.style.borderRadius = '4px';
        adLink.style.transition = 'background-color 0.3s ease';

        // 链接鼠标悬停样式
        adLink.onmouseover = function() {
            adLink.style.backgroundColor = '#e64a19';
        };
        adLink.onmouseout = function() {
            adLink.style.backgroundColor = '#ff5722';
        };

        // 添加关闭按钮的样式
        closeBtn.style.position = 'absolute';
        closeBtn.style.top = '10px';
        closeBtn.style.right = '10px';
        closeBtn.style.cursor = 'pointer';
        closeBtn.style.fontSize = '20px';
        closeBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        closeBtn.style.borderRadius = '50%';
        closeBtn.style.color = 'white';
        closeBtn.style.transition = 'background-color 0.3s ease';

        // 关闭按钮鼠标悬停样式
        closeBtn.onmouseover = function() {
            closeBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        };
        closeBtn.onmouseout = function() {
            closeBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        };

        // 关闭按钮点击事件
        closeBtn.onclick = function() {
            adContainer.style.display = 'none';
        };

        // 添加淡入动画的CSS
        var styleSheet = document.createElement('style');
        styleSheet.type = 'text/css';
        styleSheet.innerText = `
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
        document.head.appendChild(styleSheet);
        </script>

评论 (0)

昵称
邮箱
网址
取消

俠盒分享博客

提醒您:来不及找到心仪的内容?按CtrlD收藏我们后继续追找哦!