JS/jQuery 中的缩放幻灯片

Question

在当前的项目中，我们希望在起始页上播放幻灯片，稳定地循环浏览图像。到目前为止，一切都很好。

但客户还要求在转换之间缓慢缩放图像。它可以在 Flash 中使用，并且已经使用了很长一段时间，示例如下链接：

http://activeden.net/item/xml-zooming-slideshow/9577

但我想在 JS/jQuery 中实现这一点。有谁知道有一个插件可以做到这一点，或者之前写过一个可以让我们开始的插件吗？

感谢所有帮助！

致以诚挚的问候 尼古拉斯

Answer 1

这就是所谓的 “肯·伯恩斯效应”。

参见：http://tobia.github.com/CrossSlide/

我不建议使用任何 JavaScript 实现此效果 - 它们在某些浏览器中都会出现令人不愉快的“摆动”。

Answer 2

希望这对你有帮助

http://andreaslagerkvist.com/jquery/image-zoom/

Answer 3

我认为 javascript/jquery 路线是错误的方法。 CSS 是一个更好的方法。 我改编了在此页面找到的解决方案：https://www.cssscript.com/pure-css-css3-slideshow-with-image-panning-and-zooming-effect/#:~:text=A%20pure% 20HTML%20/%20CSS%20背景%20幻灯片

并在我的 React SPA 中使用了它。 效果真的很好。
我的 CSS（在您的 tsx 文件中导入 './screensaver.css' //）

figure.screensaver-figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    margin:0;
    padding:0;
}

@keyframes slideShow {
    0% {
        opacity: 0;
        transform: scale(1);
        -ms-transform: scale(1);
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        transform: scale(1.2);
        -ms-transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(1);
        -ms-transformm: scale(1);
    }
}

然后在组件内部（根据您的文件类型进行调整）：

<div style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' }}>
                {stores.photoStore.files.map((x, i) => (
                    <figure className='screensaver-figure' style={{
                        animationName: 'slideShow',
                        animationDuration: `${animationDelayEvery * 4}s`,
                        animationTimingFunction: 'linear',
                        animationIterationCount: 'infinite',
                        backgroundImage: `url('${x['@microsoft.graph.downloadUrl']}')`,
                        backgroundRepeat: 'no-repeat',
                        backgroundPositionX: 'center',
                        backgroundPositionY: 'center',
                        backgroundSize: 'cover',
                        animationDelay: `${i * animationDelayEvery}s`
                    }} key={x.id} ></figure>
                ))}
            </div>