如何使用JS同时淡入2张图片？
要使用JavaScript同时淡入两张图片，你可以使用CSS来设置图片的初始透明度，然后使用JavaScript来逐渐增加透明度，从而实现淡入效果。以下是一个简单的示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade In Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img id="image1" src="image1.jpg" alt="Image 1">
<img id="image2" src="image2.jpg" alt="Image 2">
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
img {
opacity: 0;
transition: opacity 2s ease-in-out;
}JavaScript (script.js)
document.addEventListener("DOMContentLoaded", function() {
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');
setTimeout(() => {
image1.style.opacity = 1;
}, 0);
setTimeout(() => {
image2.style.opacity = 1;
}, 0);
});解释
- HTML: 创建两个
<img>元素，分别用于显示两张图片。 - CSS: 设置图片的初始透明度为0，并添加一个过渡效果，使透明度变化平滑。
- JavaScript: 在文档加载完成后，使用
setTimeout函数将两张图片的透明度设置为1，从而实现淡入效果。
优势
- 简单易行: 使用CSS过渡效果和JavaScript控制透明度，代码简单易懂。
- 灵活性高: 可以轻松调整淡入时间和其他样式。
- 兼容性好: 现代浏览器普遍支持CSS过渡效果和JavaScript。
应用场景
- 网页设计: 在页面加载时淡入图片，提升用户体验。
- 广告展示: 在广告加载时使用淡入效果，吸引用户注意。
- 图片轮播: 在图片轮播组件中使用淡入效果，使切换更加平滑。
可能遇到的问题及解决方法
- 图片加载顺序: 如果图片加载顺序不一致，可能导致淡入效果不同步。可以通过预加载图片来解决这个问题。
- 图片加载顺序: 如果图片加载顺序不一致，可能导致淡入效果不同步。可以通过预加载图片来解决这个问题。
- 浏览器兼容性: 确保使用的CSS和JavaScript特性在目标浏览器中得到支持。可以使用Polyfill或Modernizr来处理兼容性问题。
通过以上方法，你可以实现两张图片的同时淡入效果，并解决可能遇到的问题。
相关·内容
1回答
已尝试回答- jQuery同时淡入淡出图像 我有2个分区和2个不同的图像，我希望他们加载后，我向下滚动到该部分，只有一个图像是淡入后，我应用相同的功能，这两个图像。 100px;float:left;opacity:0;height:100px;} 附注:我是JS
浏览 24提问于2021-02-28得票数 3
回答已采纳
2回答
我有一面墙的图像和下面的一些文本，我希望图像淡入，然后它的文本淡入。问:如何使用索引使相应的文本在图像后淡入？.mydiv a, .mydiv p{ display:none;}$('.mydiv a').each(function(index){
var c = $(this);
浏览 0提问于2012-10-18得票数 1
回答已采纳
嘿，伙计们，我正在用Jquery中的.css改变我的背景图片的同时尝试添加一个淡入效果，我真的不太了解java，希望有人能帮我解决这个问题！content_wrapper").css({backgroundImage : 'url(image/staff/shinji.jpg)' } ); });
它就像一个图片库，我只是在css背景图片中展示它，一切都很好，但我想知道是否有可能添加fadeIn或淡入淡出
浏览 1提问于2011-02-21得票数 2
2回答
我用php渲染了一些图像，但我也渲染了a href="" -图像区域在淡入淡出时会发生变化，但url是相同的。JQuery循环
浏览 0提问于2012-06-05得票数 0
回答已采纳
1回答
幻灯片放映/更改背景图像
、、、
我试图将我的页面背景图片设置为多张图片的幻灯片，但我想不出一种方法来在给定的时间间隔更改图片的url，同时还使用淡入/淡出转换。
浏览 10提问于2019-01-16得票数 1
1回答
幻灯片放映变得混乱
、、、
= x * h; var loopDelay = lD + 200;我认为应该发生的是，它将遍历启动一个队列的所有元素，因此它们都是连续淡入和淡出的，尽管它们都是同时淡入和淡出的，并且没有一个淡入
浏览 2提问于2013-07-28得票数 1
1回答
我对JS的异步行为有一个小问题。我的计划是循环浏览一些隐藏的图像，并使用指定的FadeIn-，FadeOut和Staytime淡入淡出。= jQuery(y);
}); 我的问题是，不是等待最后一条链接的fadeOut语句执行，而是同时在每一张图片上执行动画我也尝试过使用async和await，但它不能解决我的问题，因为它的行为和上面描述的一样。faderImg = jQuery(y)
浏览 10提问于2019-08-14得票数 0
回答已采纳
2回答
我有一个简单的CSS3淡入页面转换，这很好(只关心IE10+)。opacity:1;BODY现在唯一的问题是，如果页面有很多图像，只有在下载所有图片时才会触发我能做什么，使用纯javascript或CSS进行淡入，即使是在下载图片？
注意:不能使用任何外部js文件或框架.
浏览 5提问于2013-06-16得票数 1
回答已采纳
2回答
将淡入淡出图像交叉到背景
、、、
我正在寻找一个简单的交叉添加背景图像。我有这样的代码： $('#backgroundDiv img').attr({'src':img_fs}); $('#backgroundDiv img').fadeIn(250,'linear');
浏览 1提问于2011-09-21得票数 0
1回答
我正在尝试使用jquery为多个元素制作淡入淡出动画。这很难解释，所以我会先放入相关的代码。 opacity: 0;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js<div class="first">A</div>
<div class="se
浏览 0提问于2018-10-09得票数 0
1回答
我是jquery的新手，当点击页码时，我正在尝试淡入/淡出图库中的页面。页码也应该淡入不同的颜色，边框应该淡入/淡出。
我对此有两个问题。在localhost和jsfiddle上，图像的淡入/淡出效果很好，但在live模式下，第一次更改图库页面时会出现问题。与新页面淡入相反，它看起来好像根本没有动画。在第一次点击后，它工作正常。
浏览 0提问于2018-08-01得票数 0
我制作了很多横幅，其中有3个不同的内容组，不断淡入和淡出，使用Alpha (透明)的电影剪辑。请注意，我有许多淡入和淡出的影片剪辑，而不是每个淡入/淡出一个。我需要制作所有这些横幅的GIF版本...没有alpha淡入淡出，只有3张图片每3秒改变一次。如何在没有打印屏幕的情况下创建这些“图片”？如何从时间线中的特定点拍摄快照？如果这涉及到使用AS，请具体说明，因为不幸的是，我在该领域没有丰富的知识……
谢谢!
浏览 2提问于2014-12-12得票数 0
在我的网站上，我有一些图片，我想模糊在悬停。文本也应该同时从底部淡入。下面是我正在谈论的一个例子：。我已经尝试过了，我有两个动画用于模糊照片和褪色在文本中，但我现在不知道如何定位文本，以便它不会干扰:悬停动画。
浏览 0提问于2016-08-24得票数 0
回答已采纳
1回答
因此，我找到了一篇很棒的文章，介绍了如何使用javascript (使用opacity，在Mozilla、Opera和IE中都有效)实现图像间的淡入淡出：谢谢
浏览 0提问于2012-08-26得票数 0
回答已采纳
我试着找出这个问题的解决方案，但我看到淡入和淡出解决方案都使用一张图片，但我想同时使用两张图片。
请让我知道，如果有任何功能，给两个图像之间的闪光效果，否则我将不得不手动它。
浏览 1提问于2011-10-25得票数 0
我正在使用cycle.js进行一些图片之间的基本过渡： var first;任何帮助都非常感谢！
问候
浏览 3提问于2013-06-06得票数 0
回答已采纳
3回答
我正在使用这个代码。当它改变图像时，图像淡出，然后另一个图像淡入，同时我可以看到背景颜色，这是我不想看到的。有没有什么简单的方法可以在淡出图像的同时淡入下一张图片，或者是另一种jQuery效果，比如滑动图片？我只是不想看到背景颜色。
浏览 0提问于2012-09-22得票数 1
回答已采纳
2回答
我希望旧文本淡出，然后新文本淡入。我如何在React中达到同样的效果--或者说最好的方法是什么？className="button" onClick={this.chooseRight}>{this.state.rightButton}</button></div>我尝试过使用它添加了新文本，然后淡出旧文本，同时淡入新文本。
浏览 4提问于2016-02-19得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
