延时功能可在几天内显示图像

Time delay function to reveal image over several days

本文关键字：几天 显示 图像 显示图 功能      更新时间：2023-09-26

我想知道是否有可能随着时间的推移降低图像/元素的不透明度以显示其下方的某些内容。

例如，使用 jquery 计时器倒计时到提前 3 天的时间，我们是否可以使用该时间来显示 3 天的动画或不透明度以在计时器用完时显示底层图像？

关于我们如何构建它的任何想法？

你的问题很宽泛，所以我假设动画应该从页面加载开始运行三天。假设页面将打开三天，则可以具有长时间运行的CSS动画。不需要 JavaScript。

如果要关闭页面，则需要JavaScript在Web存储或cookie中保留运行值。然后，可以在下次加载页面时计算不透明度，并且动画将从那里继续。

下面是CSS动画的演示：

img {
  opacity: 0;
  -webkit-animation-name: reveal;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 259200s;
  animation-name: reveal;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 259200s;
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<img src='https://placekitten.com/g/200/300' alt='kitten'>

您可以使用 jQuery .fadeOut 淡出元素，但这仅适用于单个页面实例。 换句话说，每次有人刷新页面时，它都会重新开始。 这是你想要的吗？

如果您希望在给定时间访问该网站的任何人面对相同的情况，那么您可以在javascript中创建一个日期元素并基于该元素进行计算。 这需要一点工作，但应该是可能的。

在加载页面时使用创建新的日期对象

var currDate = new Date();

然后计算距离结束"显示"时间还有多长时间，并将其作为从开始（当此淡入淡出"开始时"）的总时间的百分比，并将其分配为当前不透明度。

接下来查看剩余的时间，并以该量作为持续时间开始一个新的 jquery .fadeOut 动画。

您需要将"隐藏器"放在使用位置：绝对显示的内容的顶部。

这是对一种可能的解决方案的相当高级的描述。

相关文章：