<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右侧弹出背景设置</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-attachment: fixed;
background-size: cover;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-image 0.5s ease;
padding: 20px;
position: relative;
}
/* 背景图片容器 */
#background-layer {
position: fixed;
top: 0;
left: 0;
width: 100%%;
height: 100%%;
z-index: -1;
background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80');
background-size: cover;
background-position: center;
transition: all 0.3s ease;
}
.content-container {
width: 100%%;
max-width: 800px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 40px;
}
.content-container h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
font-size: 2.5rem;
}
.content-container p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
font-size: 1.1rem;
}
.settings-container {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100%%;
background-color: white;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
z-index: 1000;
overflow-y: auto;
}
.settings-container.active {
right: 0;
}
.settings-header {
background: linear-gradient(135deg, #4e54c8, #8f94fb);
color: white;
padding: 25px 30px;
text-align: center;
position: relative;
}
.settings-header h1 {
font-size: 1.8rem;
margin-bottom: 5px;
font-weight: 700;
letter-spacing: 1px;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.close-btn:hover {
transform: scale(1.1);
}
.settings-content {
padding: 30px;
}
.setting-group {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.setting-group:last-child {
border-bottom: none;
}
.setting-title {
color: #333;
margin-bottom: 15px;
font-size: 1.2rem;
font-weight: 600;
display: flex;
align-items: center;
}
.setting-title i {
margin-right: 10px;
color: #4e54c8;
}
.slider-container {
display: flex;
align-items: center;
gap: 15px;
}
.slider-container input[type="range"] {
flex: 1;
-webkit-appearance: none;
height: 8px;
border-radius: 5px;
background: #e0e0e0;
outline: none;
}
.slider-container input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%%;
background: #4e54c8;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.slider-container input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
background: #3a40b0;
}
.slider-value {
min-width: 50px;
text-align: right;
font-weight: 600;
color: #4e54c8;
font-size: 1.1rem;
}
.bg-image-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.bg-image {
position: relative;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
aspect-ratio: 16/9;
}
.bg-image:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.bg-image.active {
box-shadow: 0 0 0 3px #4e54c8;
}
.bg-image img {
width: 100%%;
height: 100%%;
object-fit: cover;
transition: transform 0.3s ease;
}
.bg-image:hover img {
transform: scale(1.05);
}
.bg-image .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 8px;
font-size: 0.8rem;
text-align: center;
transform: translateY(100%%);
transition: transform 0.3s ease;
}
.bg-image:hover .overlay {
transform: translateY(0);
}
.custom-bg-input {
display: flex;
flex-direction: column;
gap: 15px;
}
.custom-bg-input input {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.custom-bg-input input:focus {
border-color: #4e54c8;
box-shadow: 0 0 0 2px rgba(78, 84, 200, 0.2);
outline: none;
}
.button-group {
display: flex;
gap: 10px;
}
.btn {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #4e54c8, #8f94fb);
color: white;
}
.btn-primary:hover {
background: linear-gradient(135deg, #3a40b0, #7b80f0);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(78, 84, 200, 0.4);
}
.btn-secondary {
background-color: #f0f0f0;
color: #333;
}
.btn-secondary:hover {
background-color: #e0e0e0;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.current-settings {
background-color: #f8f9ff;
padding: 20px;
border-radius: 10px;
margin-top: 25px;
border-left: 4px solid #4e54c8;
}
.current-settings h3 {
color: #4e54c8;
margin-bottom: 15px;
font-size: 1.2rem;
display: flex;
align-items: center;
}
.current-settings h3 i {
margin-right: 10px;
}
.current-settings p {
margin-bottom: 8px;
color: #555;
display: flex;
justify-content: space-between;
}
.current-settings span {
font-weight: 600;
color: #333;
}
.floating-btn {
position: fixed;
right: 20px;
top: 50%%;
transform: translateY(-50%%);
background: linear-gradient(135deg, #4e54c8, #8f94fb);
color: white;
border: none;
border-radius: 8px;
padding: 15px 10px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-weight: 600;
transition: all 0.3s ease;
}
.floating-btn:hover {
background: linear-gradient(135deg, #3a40b0, #7b80f0);
transform: translateY(-50%%) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.floating-btn i {
font-size: 1.5rem;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%%;
height: 100%%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
@media (max-width: 480px) {
.settings-container {
width: 100%%;
right: -100%%;
}
.settings-content {
padding: 20px;
}
.bg-image-selector {
grid-template-columns: repeat(2, 1fr);
}
.floating-btn {
padding: 12px 8px;
font-size: 0.9rem;
}
.content-container {
padding: 20px;
}
}
</style>
</head>
<body>
<!-- 背景图片层 -->
<div id="background-layer"></div>
<!-- 内容区域 -->
<!-- 设置面板 -->
<div id="settingsPanel">
<div>
<h1>布局设置</h1>
<button id="closeSettings">
<i class="fas fa-times"></i>
</button>
</div>
<div>
<div>
<div>
<i class="fas fa-adjust"></i> 背景透明度
</div>
<div>
<input type="range" min="0" max="100" value="100" id="opacitySlider">
<div id="opacityValue">100%%</div>
</div>
</div>
<div>
<div>
<i class="fas fa-blur"></i> 背景模糊度
</div>
<div>
<input type="range" min="0" max="20" value="0" id="blurSlider">
<div id="blurValue">0px</div>
</div>
</div>
<div>
<div>
<i class="fas fa-image"></i> 背景图片选择
</div>
<div id="bgImageSelector">
<!-- 背景图片将通过JavaScript动态添加 -->
</div>
</div>
<div>
<div>
<i class="fas fa-link"></i> 自定义背景
</div>
<div>
<input type="url" id="customUrl" placeholder="输入图片URL">
<div>
<button class="btn btn-primary" id="saveCustomUrl">
<i class="fas fa-save"></i> 保存
</button>
<button class="btn btn-secondary" id="clearBackground">
<i class="fas fa-trash"></i> 清除
</button>
</div>
</div>
</div>
<div>
<h3><i class="fas fa-cog"></i> 当前值</h3>
<p>背景图片: <span id="currentBgStatus">已设置</span></p>
<p>透明度: <span id="currentOpacity">100%%</span></p>
<p>模糊度: <span id="currentBlur">0px</span></p>
</div>
</div>
</div>
<!-- 浮动设置按钮 -->
<button id="toggleSettings">
<i class="fas fa-sliders-h"></i>
<span>设置</span>
</button>
<!-- 遮罩层 -->
<div id="overlay"></div>
<script>
// 例子:预设图片
const presetImages = [
{ id: 1, name: '晚霞', src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
{ id: 2, name: '蓝色', src: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
{ id: 3, name: '远方', src: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
{ id: 4, name: '圣诞快乐', src: 'https://images.unsplash.com/photo-1545424920-6c3154b9e979?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
];
// 当前设置
let currentSettings = {
imageUrl: presetImages[0].src,
opacity: 100,
blur: 0,
lastAutoChangeDate: null
};
// DOM元素
const settingsPanel = document.getElementById('settingsPanel');
const toggleSettingsBtn = document.getElementById('toggleSettings');
const closeSettingsBtn = document.getElementById('closeSettings');
const bgImageSelector = document.getElementById('bgImageSelector');
const customUrlInput = document.getElementById('customUrl');
const saveCustomUrlBtn = document.getElementById('saveCustomUrl');
const clearBackgroundBtn = document.getElementById('clearBackground');
const opacitySlider = document.getElementById('opacitySlider');
const opacityValue = document.getElementById('opacityValue');
const blurSlider = document.getElementById('blurSlider');
const blurValue = document.getElementById('blurValue');
const currentBgStatus = document.getElementById('currentBgStatus');
const currentOpacity = document.getElementById('currentOpacity');
const currentBlur = document.getElementById('currentBlur');
const backgroundLayer = document.getElementById('background-layer');
const overlay = document.getElementById('overlay');
// 初始化函数
function init() {
// 从localStorage加载设置
loadSettings();
// 检查是否需要自动更换背景
checkAutoChangeBackground();
// 渲染背景图片选择器
renderBgImageSelector();
// 更新当前设置显示
updateCurrentSettingsDisplay();
// 更新背景层
updateBackgroundLayer();
// 添加事件监听器
addEventListeners();
}
// 从localStorage加载设置
function loadSettings() {
const savedSettings = localStorage.getItem('backgroundSettings');
if (savedSettings) {
try {
currentSettings = JSON.parse(savedSettings);
// 更新UI元素
opacitySlider.value = currentSettings.opacity;
opacityValue.textContent = `${currentSettings.opacity}%%`;
blurSlider.value = currentSettings.blur;
blurValue.textContent = `${currentSettings.blur}px`;
// 更新当前设置显示
updateCurrentSettingsDisplay();
// 更新背景层
updateBackgroundLayer();
} catch (e) {
console.error('Failed to load settings:', e);
}
}
}
// 保存设置到localStorage
function saveSettings() {
localStorage.setItem('backgroundSettings', JSON.stringify(currentSettings));
updateCurrentSettingsDisplay();
updateBackgroundLayer();
}
// 检查是否需要自动更换背景
function checkAutoChangeBackground() {
const today = new Date().toDateString();
// 如果是新的一天，自动更换背景
if (currentSettings.lastAutoChangeDate !== today) {
changeBackgroundForToday();
}
}
// 根据日期自动更换背景
function changeBackgroundForToday() {
const today = new Date();
const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));
const imageIndex = dayOfYear %% presetImages.length;
currentSettings.imageUrl = presetImages[imageIndex].src;
currentSettings.lastAutoChangeDate = today.toDateString();
saveSettings();
renderBgImageSelector();
}
// 渲染背景图片选择器
function renderBgImageSelector() {
bgImageSelector.innerHTML = '';
presetImages.forEach(image => {
const imageElement = document.createElement('div');
imageElement.className = 'bg-image';
if (image.src === currentSettings.imageUrl) {
imageElement.classList.add('active');
}
imageElement.innerHTML = `
<img src="${image.src}" alt="${image.name}">
<div>${image.name}</div>
`;
imageElement.addEventListener('click', () => {
selectBgImage(image.src);
});
bgImageSelector.appendChild(imageElement);
});
}
// 选择背景图片
function selectBgImage(imageUrl) {
currentSettings.imageUrl = imageUrl;
// 当用户手动选择背景时，重置自动更换日期
currentSettings.lastAutoChangeDate = new Date().toDateString();
saveSettings();
renderBgImageSelector();
}
// 更新背景层
function updateBackgroundLayer() {
backgroundLayer.style.backgroundImage = `url('${currentSettings.imageUrl}')`;
backgroundLayer.style.opacity = currentSettings.opacity / 100;
backgroundLayer.style.filter = `blur(${currentSettings.blur}px)`;
}
// 更新当前设置显示
function updateCurrentSettingsDisplay() {
currentBgStatus.textContent = currentSettings.imageUrl ? '已设置' : '未设置';
currentOpacity.textContent = `${currentSettings.opacity}%%`;
currentBlur.textContent = `${currentSettings.blur}px`;
}
// 添加事件监听器
function addEventListeners() {
// 切换设置面板显示/隐藏
toggleSettingsBtn.addEventListener('click', () => {
settingsPanel.classList.toggle('active');
overlay.style.display = settingsPanel.classList.contains('active') ? 'block' : 'none';
});
// 关闭设置面板
closeSettingsBtn.addEventListener('click', () => {
settingsPanel.classList.remove('active');
overlay.style.display = 'none';
});
// 点击遮罩层关闭设置面板
overlay.addEventListener('click', () => {
settingsPanel.classList.remove('active');
overlay.style.display = 'none';
});
// 保存自定义URL
saveCustomUrlBtn.addEventListener('click', () => {
const url = customUrlInput.value.trim();
if (url) {
currentSettings.imageUrl = url;
// 当用户手动设置自定义背景时，重置自动更换日期
currentSettings.lastAutoChangeDate = new Date().toDateString();
saveSettings();
renderBgImageSelector();
customUrlInput.value = '';
}
});
// 清除背景
clearBackgroundBtn.addEventListener('click', () => {
currentSettings.imageUrl = '';
saveSettings();
renderBgImageSelector();
});
// 透明度滑块
opacitySlider.addEventListener('input', () => {
const value = opacitySlider.value;
opacityValue.textContent = `${value}%%`;
currentSettings.opacity = parseInt(value);
saveSettings();
});
// 模糊度滑块
blurSlider.addEventListener('input', () => {
const value = blurSlider.value;
blurValue.textContent = `${value}px`;
currentSettings.blur = parseInt(value);
saveSettings();
});
}
// 初始化应用
init();
</script>
</body>
</html>
本文最后更新时间 2025-11-25
文章链接地址：https://xzlo.blog/index.php/archives/87/
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处
