Fatal编程技术网
  • javascript/
  • Javascript 调整窗口大小时的图像动画

Javascript 调整窗口大小时的图像动画

javascript html css animation

Javascript 调整窗口大小时的图像动画,javascript,html,css,animation,onresize,Javascript,Html,Css,Animation,Onresize,我想知道是否有可能在不同大小之间设置徽标动画，如在“调整窗口大小”上 因此，当窗口大小调整为较小的窗口时，徽标将设置为较小的变体，反之亦然 我对动画不是很感兴趣，但更多的是关于如何将窗口大小调整与动画相结合 我知道有一个javascript onresize事件，可以使用javascript制作徽标动画 我不知道用JS还是CSS制作动画效果最好 我正试图用html、css和javascript来实现这一点。你的文章中有点不清楚你想要实现什么。 要确定不同的窗口大小，可以根据不同设备的分辨率选择以

我想知道是否有可能在不同大小之间设置徽标动画，如在“调整窗口大小”上

因此，当窗口大小调整为较小的窗口时，徽标将设置为较小的变体，反之亦然

我对动画不是很感兴趣，但更多的是关于如何将窗口大小调整与动画相结合

我知道有一个javascript onresize事件，可以使用javascript制作徽标动画

我不知道用JS还是CSS制作动画效果最好

我正试图用html、css和javascript来实现这一点。

你的文章中有点不清楚你想要实现什么。 要确定不同的窗口大小，可以根据不同设备的分辨率选择以下css代码

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
根据你的帖子，你想制作一个标志的动画。为此，请将徽标的动画置于css分辨率限制之一内

以下代码取自：

如果您想了解有关窗口大小调整的更多信息，请单击上面的链接

希望这能有所帮助

我想知道是否有可能动画之间的不同大小的标志，像这样的窗口调整

是的，你可以这样做，有几个选择

我不知道用JS还是CSS制作动画效果最好

我想说这取决于你的动画。CSS通常比Javascript“轻”，但可能不适用于复杂的动画。另一方面，您可以使用（和其他）等Javascript选项，这将允许您拥有更复杂的动画，并且通常在浏览器和设备之间更兼容。但是，它们需要在代码中包含额外的库

如何将窗口大小调整与动画相结合

您可以将CSS与媒体查询一起使用（如Shean的回答所述），也可以使用Javascript调整事件大小（如您所说）。如果动画是CSS，我建议使用CSS媒体查询；如果动画是Javascript，建议使用Javascript调整事件大小。你可以把它们混在一起，但我认为这不是个好主意

以下是两个基本示例（一个用于CSS动画，另一个用于JS动画）：

CSS动画 您可以使用以下HTML结构：

<body>
  <div class="my-logo">
    My logo here
  </div>
</body>

<body>
  <div id="smallLogo">
    My small logo animation here
  </div>
  <div id="bigLogo">
    My big logo animation here
  </div>
</body>
Javascript动画 您可以使用以下HTML结构：

<body>
  <div class="my-logo">
    My logo here
  </div>
</body>

<body>
  <div id="smallLogo">
    My small logo animation here
  </div>
  <div id="bigLogo">
    My big logo animation here
  </div>
</body>


我的小标志动画在这里
我的大标志动画在这里
这个Javascript：

function handleLogoDisplay() {
  if (window.innerWidth < 768) {
    document.getElementById("smallLogo").style.display = "block"
    document.getElementById("bigLogo").style.display = "none"
  } else {
    document.getElementById("smallLogo").style.display = "none"
    document.getElementById("bigLogo").style.display = "block"
  }
}

window.addEventListener('resize', handleLogoDisplay);

函数handleLogoDisplay（）{
如果（窗内宽度<768）{
document.getElementById（“smallLogo”）.style.display=“block”
document.getElementById（“bigLogo”）.style.display=“无”
}否则{
document.getElementById（“smallLogo”）.style.display=“无”
document.getElementById（“bigLogo”）.style.display=“block”
}
}
window.addEventListener（'resize'，handleLogoDisplay）；
因此，您不太关心如何处理动画，而更关心代码中的各个阶段。您可以使用不同的徽标，并根据屏幕大小使用js或css媒体查询进行更改。