源码介绍
把下列源代码加入到首页中即可实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精码云库5周年会员促销</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#1e40af',
accent: '#f97316',
dark: '#0f172a',
light: '#f8fafc',
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.float-animation {
animation: float 3s ease-in-out infinite;
}
.pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.price-highlight {
text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="m-0 p-0 bg-gray-50 min-h-screen">
<!-- 悬浮广告窗口 -->
<div id="floatAd" class="fixed bottom-4 right-4 bg-white rounded-xl shadow-xl overflow-hidden transform transition-all duration-500 scale-100 z-50 w-[clamp(280px,30vw,400px)]">
<!-- 广告头部 -->
<div class="bg-gradient-to-r from-primary to-secondary text-white p-4">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">精码云库5周年庆典</h3>
<button id="closeAd" class="text-white hover:text-gray-200 transition-colors">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<p class="text-blue-100 mt-1 text-sm">限时折扣，名额有限</p>
</div>
<!-- 广告内容 -->
<div class="p-4">
<div class="relative overflow-hidden rounded-lg mb-4">
<img src="https://picsum.photos/seed/code/800/400" alt="精码云库5周年会员促销" class="w-full h-auto transform hover:scale-105 transition-transform duration-500">
<div class="absolute top-2 left-2 bg-accent text-white text-xs font-bold px-2 py-1 rounded-full pulse-slow">
限时5折
</div>
</div>
<h4 class="font-semibold text-lg mb-2">会员限时折扣</h4>
<p class="text-gray-600 mb-4">
仅需<span class="text-accent font-bold text-xl price-highlight">198元</span>，
畅享全站资源免费下载！进入高级会员群，
尊享高级会员资格，享受全站年分红奖励
</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-clock-o mr-2"></i>
<span id="countdown" class="font-mono"></span>
</div>
<a href="https://www.jmkuc.com" target="_blank" class="w-full bg-accent hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg transition-colors transform hover:scale-105 hover:shadow-lg flex items-center justify-center cursor-pointer">
<i class="fa fa-rocket mr-2"></i>
立即抢购，立省200元
</a>
</div>
<!-- 广告底部 -->
<div class="bg-gray-50 p-3 text-center text-xs text-gray-500">
<button id="hideAd" class="text-gray-500 hover:text-gray-700 transition-colors">
<i class="fa fa-eye-slash mr-1"></i> 不再显示
</button>
</div>
</div>
<script>
// 倒计时功能
function updateCountdown() {
const endDate = new Date('2025-07-31T23:59:59').getTime();
const now = new Date().getTime();
const distance = endDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('countdown').innerHTML =
`${days}天 ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = '活动已结束';
}
}
// 初始更新倒计时
updateCountdown();
// 每秒更新一次
const countdownTimer = setInterval(updateCountdown, 1000);
// 关闭广告
document.getElementById('closeAd').addEventListener('click', function() {
const ad = document.getElementById('floatAd');
ad.classList.remove('scale-100');
ad.classList.add('scale-0');
// 5秒后重新显示
setTimeout(() => {
ad.classList.remove('scale-0');
ad.classList.add('scale-100', 'float-animation');
}, 5000);
});
// 不再显示广告
document.getElementById('hideAd').addEventListener('click', function() {
const ad = document.getElementById('floatAd');
ad.classList.remove('scale-100');
ad.classList.add('scale-0');
// 存储用户偏好
localStorage.setItem('hideAd', 'true');
});
// 检查用户是否已选择不再显示广告
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('hideAd') === 'true') {
document.getElementById('floatAd').classList.add('scale-0');
} else {
// 页面加载完成后延迟显示广告
setTimeout(() => {
document.getElementById('floatAd').classList.add('float-animation');
}, 2000);
}
});
</script>
</body>
</html>
源码截图
