Question

只是一个简单的问题，就像在询问特定代码时使用HTML时要求的可能性一样。

我看过带有滑块的网站，当您进入网站时可点击的图片会淡入。我试着寻找答案，但不确定要搜索什么，所以我希望你理解我的意思。

我正在为我的网站创建一个“输入”页面，我想要包含3个可点击的图片，文字“欢迎blabla在顶部带有徽标。在徽标下面我想要我的3张图片，但不是只是把图像砸在脸上我想要进行平滑过渡，在进入网站时它们会淡入，以及如果我选择扩展并获得更多图像，我希望稍后点击两侧的箭头的可能性输入页面。

我希望你能得到这个想法，否则请问，然后我会尝试更好地解释一下。

谢谢：）

淡入淡出代码：

CSS：

img{
    opacity:0;
    font-size:2em;
    font-weight:bolder;
    text-align:center;
    -webkit-transition: all 2s ease;
}
.animate{
    color:red;
    opacity:1;
    -webkit-transform:scale(1.2);
}

HTML：

<img src="welcome.png" />

JavaScript的：

 <script>
$(document).ready(function(){
    $('img').addClass('animate');
});
</script>

Answer 1

使用

$(document).ready(function(){
    //code here
});

要在页面加载后立即运行。例如：

$(document).ready(function(){
    $('#image-one').fadeIn();
});

Answer 2

我认为你需要一些javascript！

首先，我认为如果使用javascript或css或wathever预加载此类图像会更好。这是因为加载图像时出现一些延迟会破坏您的淡入淡出效果。

然后你必须设置一个动画。

您可以为alpha属性定义一个低运动（trasparency），例如，将变量alpha设想为图像的trasparency等级（在此示例中alpha为0到100之间）

然后你想要alpha作为时间的函数，让我们说alpha = alpha（t）
例如，如果你想要在T秒内从0到100的立方进化，你可以定义

alpha(t) = 100*(t/T)^3

一旦您将此动作定义为低，您需要定义时间 Javascript允许您使用setInterval函数（或等效函数）设置一些定期回调这样的函数每X毫秒调用一个自定义方法，其中X是任意的！

因此您可以将alpha运动离散化并使用这些回调来更新alpha值。

所以你可以每X毫秒更新一次alpha，所以你有alpha = alpha（X）在pratice中，您可以定义一个函数“update_alpha（）”，该函数每隔X毫秒由setInterval调用。
设N是一个初始化为零的全局变量（将计算周期数）在立方体示例中，伪代码“update_alpha”可以具有以下形式：

function update_alpha(){
    N++;
    alpha = 100*(N*X*1000/T)^3;
    if(alpha>=100) alpha=100 and remove_callback;
}

（其中存在* 1000乘法，因为X以毫秒为单位）

一般来说，如果你有alpha = f（t），你可以简单地假设t = N * X，因此f（t） - > f（N）你可以简单地使用这个例子。

另一种方法是使用增量系统。在这种情况下，您可以将alpha（t）表示为系统：

alpha(N) = alpha(N-1) + u(N)

当u不是N的函数时，这很有用。例如，如果你想让alpha以线性方式进化（alpha（t）= a * t或alpha（N）= a * N）（与那时你可以简单地写一下

alpha(N) = a*(N-1) + a

在这种情况下，您可以通过将update_alpha函数定义为：

来忘记回合N.

function update_alpha(){
    alpha += a;
    if(alpha>=100) alpha=100 and remove_callback;
}

如此概括：

预载图片
通过javascript setInterval设置时间
定义更新功能

Answer 3

当您进入网站时，会产生淡入淡出效果或将过渡效果（缓动功能）应用于特定类别中应用的特定图像。

Answer 4

使用transition和JQuery在页面加载时为动画制作动画。

简单示例FIDDLE

<script type="text/javascript">
    $(document).ready(function(){
        $('div').addClass('animate');
    });
</script>

<强> CSS

.animate{
    color:red;
    opacity:1;
    -webkit-transform:scale(1.2);
}

<强>更新

带图片示例的

Fiddle

褪色图像/流畅的网站使用

4 个答案: