Question

这是一个简单的JS函数：print将检查某些div并替换这些div中的图像。

我的问题：我可以仅使用JS来调节图像之间的过渡时间吗？

谢谢！

temp.data

Answer 1

否，如果您更改src属性，则无法完成此操作。但是，还有其他方法可以做到这一点。您可以彼此使用两个图像元素并为opacity css属性设置动画，也可以创建div并设置background-image属性。

function changeImage1() {
  var img = document.getElementById("myimg1")
  img.style.opacity = 0;
}

function changeImage2() {
  var img = document.getElementById("myimg2")
  img.style.backgroundImage = 'url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png")'
}

#imgContainer {
  position: relative;
}

#myimg1 {
  transition: opacity 5s;
  position: absolute;
  top: 0;
  left: 0;
}

#myimg2 {
  background-image: url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png");
  background-size: contain;
  transition: background-image 5s;
  width: 100px;
  height: calc(100px * 3840 / 2160);
}

<h1>Option 1</h1>

<div id="imgContainer">
  <img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png" width="100">
  <img id="myimg1" src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png" width="100">
</div>
<button onclick="changeImage1()">Change</button>

<h1>Option 2<h1>

<div id="myimg2"></div>
<button onclick="changeImage2()">Change</button>

Answer 2

尝试使用jquery fadeIn和fadeOut函数进行此操作，您也可以更改延迟

$("#link").click(function() {
    $("#image").fadeOut(1000, function() {
        $("#image").attr("src",$("#link").attr("href"));
    }).fadeIn(1000);
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg"/>
<a id="link" href="http://www.google.com/logos/2011/mothersday11-hp.jpg">Change picture</a>

Answer 3

运行此代码。由于此时我没有工作要做，所以我只使用了100％纯净的JavaScript :)，但是如果我需要这样的功能，我肯定会使用jquery fadeIn（）和fadeOut（）方法。（注意：可以使用jquery或纯CSS和JS的2、3行轻松完成）：）

<button>click</button>
<div class='imgContainer'><img id='img' src="https://images.unsplash.com/photo-1556757758-bcaf8510b51d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="opacity: 1 ; display: block;" alt=""></div>
<script>
	const button = document.querySelector('button');
	const imgContainer = document.querySelector('.imgContainer');

	button.addEventListener('click' , () => {
	const styleAttr = imgContainer.childNodes[0].attributes[2].nodeValue;
	const splitAttr = styleAttr.split(';');
	let opacity = Number(splitAttr[0].split(':')[1]);

	if(opacity > 0){
		let i = opacity
		const interval1 = setInterval(changeImg, 20);
		function changeImg(){
			if( i > 0){
				const newStyle = 'opacity: '+ i + '; display: block';
				imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
				i = i - 0.1;
			}
			if( i < 0){
				clearInterval(interval1);
				i = 0;

				const firstImg = 'https://images.unsplash.com/photo-1556757758-bcaf8510b51d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
				const secondImg = 'https://images.unsplash.com/photo-1556644326-3b615a8ebed8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'

				let currentUrl = imgContainer.childNodes[0].attributes[1].nodeValue	
				if( currentUrl == firstImg ){
					imgContainer.childNodes[0].attributes[1].nodeValue = secondImg
				}
				if( currentUrl == secondImg ){
					imgContainer.childNodes[0].attributes[1].nodeValue = firstImg
				}
										
				const newStyle = 'opacity: 0 ; display: none'
				imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
				const interval2 = setInterval(increaseOpacity, 20);	

				function increaseOpacity(){
					if( i >= 0 && i < 1 ){
						const newStyle = 'opacity: '+ i + '; display: block';
						imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
						i = i + 0.1;
					}
					if( i >= 1 ){
						const newStyle = 'opacity: 1 ; display: block'
						imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
						clearInterval(interval2);
					}
				}
			}						
		}
	}
    })
	</script>

是否可以使if语句将一个img缓慢地更改为另一个img？

3 个答案: