9月4日我花了一点时间写的纯js表达的代码(没有一点杂质),主要是为了适配永硕E盘,特此记录下来。次代码可以经过进一步改造,修改成各种类型的东西,比如公告弹窗等等。css样式比较简易,不满意的同志可自行修改。
食用方法
将代码全部复制,粘贴到你的网站页面(html或者php文件)中。
效果图
代码
<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 = '×';
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)