当前位置：首页 > JavaScript

js实现封面

2026-02-01 02:38:59JavaScript

使用JavaScript实现网页封面效果

全屏背景封面

通过CSS和JavaScript结合实现全屏背景封面，适配不同设备尺寸：

window.addEventListener('load', function() {
    const cover = document.getElementById('cover');
    function resizeCover() {
        cover.style.height = window.innerHeight + 'px';
    }
    resizeCover();
    window.addEventListener('resize', resizeCover);
});

动态渐变显示效果

实现封面元素的渐显动画：

function showCover() {
    const elements = document.querySelectorAll('.cover-element');
    elements.forEach((el, index) => {
        setTimeout(() => {
            el.style.opacity = 1;
            el.style.transform = 'translateY(0)';
        }, 200 * index);
    });
}
setTimeout(showCover, 500);

视频背景封面

使用视频作为动态背景：

const videoCover = document.getElementById('video-cover');
videoCover.play().catch(e => {
    videoCover.muted = true;
    videoCover.play();
});

封面自动消失

设置封面在一定时间后自动隐藏：

setTimeout(() => {
    document.getElementById('cover').classList.add('fade-out');
    setTimeout(() => {
        document.getElementById('cover').style.display = 'none';
    }, 1000);
}, 3000);

滚动触发展示

当用户滚动时显示封面内容：

let scrolled = false;
window.addEventListener('scroll', function() {
    if (!scrolled) {
        document.getElementById('cover-content').style.opacity = 1;
        scrolled = true;
    }
});

响应式封面图片

根据设备尺寸加载不同封面：

function loadCoverImage() {
    const coverImg = document.getElementById('cover-img');
    const screenWidth = window.innerWidth;
    if (screenWidth < 768) {
        coverImg.src = 'mobile-cover.jpg';
    } else {
        coverImg.src = 'desktop-cover.jpg';
    }
}
window.addEventListener('resize', loadCoverImage);
loadCoverImage();

封面交互按钮

为封面添加交互按钮事件：

document.getElementById('cover-btn').addEventListener('click', function() {
    this.classList.add('clicked');
    document.querySelector('.cover-text').style.opacity = 0;
});

预加载封面资源

确保封面资源完全加载：

window.addEventListener('load', function() {
    const images = document.querySelectorAll('.cover-image');
    let loaded = 0;
    images.forEach(img => {
        if (img.complete) {
            loaded++;
        } else {
            img.addEventListener('load', function() {
                loaded++;
                if (loaded === images.length) {
                    initCoverAnimation();
                }
            });
        }
    });
});

本地存储控制

使用localStorage控制封面显示频率：

if (!localStorage.getItem('coverShown')) {
    document.getElementById('cover').style.display = 'block';
    localStorage.setItem('coverShown', 'true');
}

视差滚动效果

创建封面视差效果：

window.addEventListener('scroll', function() {
    const scrollPosition = window.pageYOffset;
    document.querySelector('.parallax-bg').style.transform = 
        'translateY(' + scrollPosition * 0.5 + 'px)';
    document.querySelector('.parallax-content').style.transform = 
        'translateY(' + scrollPosition * 0.2 + 'px)';
});

js实现封面