开源工具，Github开源项目排行

搜索 TinyTools

动态背景图切换的实现

动态背景图切换效果

我将创建一个具有动态背景图切换功能的页面，背景图在滚动时保持固定，同时提供多种方式切换背景图。

思路分析

  • 使用CSS的background-attachment: fixed实现背景固定
  • 通过JavaScript动态修改背景图片
  • 添加多种切换方式：按钮切换、自动轮播、键盘控制
  • 使用渐入渐出效果提升用户体验

实现代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态背景图切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            transition: background-image 1.5s ease-in-out;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .content {
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: #2c3e50;
            font-size: 2.5rem;
        }
        
        p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }
        
        .section {
            margin-bottom: 3rem;
        }
        
        .section-title {
            border-bottom: 2px solid #3498db;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            color: #2c3e50;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 0.8rem 1.5rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .btn.active {
            background-color: #2c3e50;
        }
        
        .image-placeholder {
            height: 300px;
            background-color: #ecf0f1;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1.5rem 0;
            color: #7f8c8d;
            font-style: italic;
        }
        
        .quote {
            font-style: italic;
            padding: 1.5rem;
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            margin: 1.5rem 0;
        }
        
        footer {
            text-align: center;
            padding: 2rem;
            background-color: rgba(44, 62, 80, 0.9);
            color: white;
            margin-top: 3rem;
        }
        
        .current-bg {
            text-align: center;
            margin-bottom: 1rem;
            font-weight: bold;
            color: #2c3e50;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 0.5rem;
            border-radius: 5px;
            display: inline-block;
            margin: 0 auto 1rem;
        }
        
        .bg-selector {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .bg-thumb {
            width: 80px;
            height: 60px;
            border-radius: 5px;
            cursor: pointer;
            border: 3px solid transparent;
            transition: border 0.3s;
            object-fit: cover;
        }
        
        .bg-thumb.active {
            border: 3px solid #3498db;
        }
        
        .auto-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin: 1rem 0;
        }
        
        .auto-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #3498db;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .keyboard-hint {
            text-align: center;
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <h1>动态背景图切换</h1>
            
            <div class="current-bg">当前背景：山脉湖泊</div>
            
            <div class="bg-selector">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="山脉湖泊" class="bg-thumb active" data-bg="https://images.unsplash.com/photo-1506744038136-46273834b3fb" data-name="山脉湖泊">
                <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="海滩日落" class="bg-thumb" data-bg="https://images.unsplash.com/photo-1501785888041-af3ef285b470" data-name="海滩日落">
                <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e" alt="森林" class="bg-thumb" data-bg="https://images.unsplash.com/photo-1441974231531-c6227db76b6e" data-name="森林">
                <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05" alt="山脉云雾" class="bg-thumb" data-bg="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05" data-name="山脉云雾">
                <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff" alt="田野" class="bg-thumb" data-bg="https://images.unsplash.com/photo-1426604966848-d7adac402bff" data-name="田野">
            </div>
            
            <div class="controls">
                <button class="btn" id="prevBtn">上一个</button>
                <button class="btn" id="nextBtn">下一个</button>
                <button class="btn" id="randomBtn">随机背景</button>
            </div>
            
            <div class="auto-controls">
                <div class="auto-toggle">
                    <span>自动切换:</span>
                    <label class="switch">
                        <input type="checkbox" id="autoToggle">
                        <span class="slider"></span>
                    </label>
                </div>
                <div>
                    <label for="interval">间隔(秒):</label>
                    <select id="interval">
                        <option value="3">3</option>
                        <option value="5" selected>5</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                    </select>
                </div>
            </div>
            
            <div class="keyboard-hint">提示：使用键盘左右箭头键也可以切换背景</div>
            
            <div class="section">
                <h2 class="section-title">动态背景图效果</h2>
                <p>这个页面展示了动态切换背景图的效果。当你向下滚动页面时，背景图像保持不动，只有内容区域在滚动。</p>
                <p>你可以通过多种方式切换背景图：点击缩略图、使用按钮、开启自动切换或使用键盘左右箭头键。</p>
            </div>
            
            <div class="section">
                <h2 class="section-title">美丽的风景</h2>
                <p>背景图展示了一片宁静的山脉和湖泊，象征着自然之美。无论我们如何忙碌，都应该偶尔停下来欣赏周围的风景。</p>
                <div class="image-placeholder">内容图片占位区</div>
                <p>大自然总是能给我们带来平静和灵感。在忙碌的现代生活中，我们常常忘记停下来感受周围的世界。</p>
            </div>
            
            <div class="section">
                <h2 class="section-title">技术实现</h2>
                <p>这个效果通过JavaScript动态修改body元素的<code>background-image</code>属性实现。</p>
                <div class="quote">
                    "好的设计是显而易见的，而优秀的设计是透明的。" - Joel Spolsky
                </div>
                <p>通过固定背景图，设计师可以确保关键视觉元素始终可见，同时不影响内容的可读性和可访问性。</p>
            </div>
            
            <div class="section">
                <h2 class="section-title">更多内容</h2>
                <p>继续向下滚动，体验固定背景图的效果。注意背景图像如何保持不动，而内容区域在滚动。</p>
                <div class="image-placeholder">另一个内容图片占位区</div>
                <p>这种设计技术可以应用于各种类型的网站，从个人博客到企业网站，都能增强视觉吸引力。</p>
                <p>无论你是网页设计新手还是经验丰富的开发者，掌握固定背景图技术都能提升你的设计工具箱。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>动态背景图切换演示 &copy; 2023</p>
    </footer>

    <script>
        // 背景图数据
        const backgrounds = [
            {
                url: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
                name: '山脉湖泊'
            },
            {
                url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470',
                name: '海滩日落'
            },
            {
                url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
                name: '森林'
            },
            {
                url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05',
                name: '山脉云雾'
            },
            {
                url: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff',
                name: '田野'
            }
        ];
        
        // DOM元素
        const body = document.body;
        const currentBgElement = document.querySelector('.current-bg');
        const bgThumbs = document.querySelectorAll('.bg-thumb');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const randomBtn = document.getElementById('randomBtn');
        const autoToggle = document.getElementById('autoToggle');
        const intervalSelect = document.getElementById('interval');
        
        // 当前背景索引
        let currentIndex = 0;
        let autoChangeInterval;
        
        // 更新背景图
        function updateBackground(index) {
            // 更新当前索引
            currentIndex = index;
            
            // 更新背景图
            body.style.backgroundImage = `url('${backgrounds[index].url}')`;
            
            // 更新当前背景显示
            currentBgElement.textContent = `当前背景：${backgrounds[index].name}`;
            
            // 更新缩略图激活状态
            bgThumbs.forEach((thumb, i) => {
                if (i === index) {
                    thumb.classList.add('active');
                } else {
                    thumb.classList.remove('active');
                }
            });
        }
        
        // 下一个背景
        function nextBackground() {
            let nextIndex = currentIndex + 1;
            if (nextIndex >= backgrounds.length) {
                nextIndex = 0;
            }
            updateBackground(nextIndex);
        }
        
        // 上一个背景
        function prevBackground() {
            let prevIndex = currentIndex - 1;
            if (prevIndex < 0) {
                prevIndex = backgrounds.length - 1;
            }
            updateBackground(prevIndex);
        }
        
        // 随机背景
        function randomBackground() {
            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * backgrounds.length);
            } while (randomIndex === currentIndex && backgrounds.length > 1);
            
            updateBackground(randomIndex);
        }
        
        // 开始自动切换
        function startAutoChange() {
            const interval = parseInt(intervalSelect.value) * 1000;
            autoChangeInterval = setInterval(nextBackground, interval);
        }
        
        // 停止自动切换
        function stopAutoChange() {
            clearInterval(autoChangeInterval);
        }
        
        // 事件监听
        // 缩略图点击
        bgThumbs.forEach((thumb, index) => {
            thumb.addEventListener('click', () => {
                updateBackground(index);
            });
        });
        
        // 按钮点击
        prevBtn.addEventListener('click', prevBackground);
        nextBtn.addEventListener('click', nextBackground);
        randomBtn.addEventListener('click', randomBackground);
        
        // 自动切换开关
        autoToggle.addEventListener('change', function() {
            if (this.checked) {
                startAutoChange();
            } else {
                stopAutoChange();
            }
        });
        
        // 间隔时间改变
        intervalSelect.addEventListener('change', function() {
            if (autoToggle.checked) {
                stopAutoChange();
                startAutoChange();
            }
        });
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                prevBackground();
            } else if (e.key === 'ArrowRight') {
                nextBackground();
            }
        });
        
        // 初始化
        updateBackground(0);
    </script>
</body>
</html>

功能说明

  1. 固定背景效果：使用background-attachment: fixed实现背景固定

  2. 多种切换方式：

    • 点击缩略图直接切换
    • 使用"上一个"、"下一个"和"随机"按钮
    • 开启自动轮播功能
    • 使用键盘左右箭头键切换

  3. 用户体验优化：

    • 背景切换时有平滑的过渡效果
    • 显示当前背景名称
    • 缩略图高亮显示当前背景
    • 可调节自动切换间隔时间

  4. 响应式设计：适配不同屏幕尺寸

这个页面不仅实现了固定背景效果，还提供了丰富的交互方式让用户可以自由切换背景图，增强了用户体验。

近期文章

使用docker安装nexus3并配置使用
SNMP-使用MIB Builder生成MIB文件
基于Net-SNMP简单网络管理的开发指南
鼠标悬停改变背景色的div实现
半透明Div实现方案
Git退回到历史提交记录并同步到远程
Go中实体控制部分字段生成json的方法
动态背景图切换的实现
html平铺且固定背景图实现
Go语言中的 panic 异常及处理方法
Docker迁移容器的最佳实践
使用SSH远程执行机器上的shell脚本
Git项目手动迁移到新的仓库
Ubuntu24通过官方apt安装MySQL8
MySQL创建用户与授权