Javascript图像交换上的CSS过渡

Question

I've got a set of images to swap with another set of images in Javascript, but it looks ugly when it snaps between two images. 我有一组图像可以与Javascript中的另一组图像交换，但是当它在两个图像之间捕捉时看起来很难看。 I want them to fade, and I've managed to do this with the webpage background in CSS. 我希望它们淡入淡出，并且已经设法通过CSS中的网页背景来做到这一点。 Trouble is, I can't get it to work on the images, and I'm not sure why. 麻烦的是，我无法在图像上使用它，我不确定为什么。

Here's the script to change between the images: 这是在图像之间切换的脚本：

    function change_img()
{
    document.images.logo.src = "Images/logo(w).png";
    document.images.about.src = "Images/About50(w).png";
    document.images.projects.src = "Images/Projects50(w).png";
    document.images.contact.src = "Images/Contact50(w).png";
}

function change_back()
{
    document.images.logo.src = "Images/logo.png";
    document.images.about.src = "Images/About50.png";
    document.images.projects.src = "Images/Projects50(2).png";
    document.images.contact.src = "Images/Contact50.png";
}

That's in the head of the document. 那是在文档的开头。 Then we have an example of one of the images to be swapped: 然后我们有一个要交换的图像的示例：

<center><img class="transition" name="logo" src="Images/logo.png" height="300" style="z-index:1"></center>

That's activated by a mouseover event on one of the other images. 这是由其他图像之一上的mouseover事件激活的。 There's four to be changed in total. 总共有四个要更改。 And finally, the CSS that I thought would trigger the transition: 最后，我认为会触发转换的CSS：

.transition{-webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;}

Quite simply, I've stuck the transition rules in a single CSS rule and attributed it to each image. 很简单，我已将转换规则粘贴在一个CSS规则中，并将其归因于每个图像。 Have I linked it incorrectly somehow? 我是否以某种方式错误地链接了它？ I can't understand why this isn't working.. 我不明白为什么这不起作用。

Answer 1

What CSS can "transit" are CSS properties, not element attributes like src . CSS可以“转换”的是CSS属性，而不是src类的元素属性。

What you should to is to have two images in the DOM, one for the current image, and one for the new image, and make the latter fade onto the former. 您应该做的是在DOM中有两张图像，一幅用于当前图像，一幅用于新图像，并使后者淡入前一幅图像。

Something like this: 像这样：

function change_img() {
    var img = document.getElementsByName("logo")[0],
        newImg = new Image();
    newImg.name = "logo";
    newImg.src = "Images/logo.png";
    img.parentNode.insertBefore(newImg, img.nextSibling);
    newImg.className = "transition";
    setTimeout(function() {img.parentNode.removeChild(img);}, 500);
    ...
}

This is the CSS part: 这是CSS部分：

[name="logo"] + img {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.transition {opacity: 1;}

Answer 2

I've managed to do this with the webpage background in CSS 我已经设法用CSS中的网页背景做到这一点

only webkit browsers support the background fading transition. 仅Webkit浏览器支持后台淡入淡出过渡。 so if u wanna use that continue using backgrounds. 因此，如果您想使用它，请继续使用背景。 assuming the logos to swap are 2 and the size of them is equal .. for example 100pixel: 假设要交换的徽标为2，并且徽标的大小等于..例如100pixel：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>talk</title>
<style>
#logo{
 width:100px;
 height:100px;
 -webkit-transition: background-image 1s ease-in-out;
 background-image:url("logo1.png");
}
#logo.anotherLogo {
 background-image:url("logo2.png");
}
</style>
<script>
var swap=function(){
 document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
 document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo"></div>
<button>swap logo</button>
</body>
</html>

solution 2, this one has more support (works on most modern browsers and not just only on webkit browsers) 解决方案2，该解决方案具有更多的支持（可在大多数现代浏览器上运行，而不仅限于Webkit浏览器上）

this needs 2 images inside a div and the use of absolute in the css and as u can see much more css 这需要在div内包含2张图片，并且在CSS中使用绝对值，因为您可以看到更多的CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
 width:128px;
 height:128px;
}
#logo>img{
 position:absolute;
 width:128px;
 height:128px;
 -webkit-transition:opacity 1s ease-in-out;
}

#logo>img:nth-child(2){
 opacity:0;
}
#logo.anotherLogo>img:nth-child(2){
 opacity:1;
}
#logo.anotherLogo>img:nth-child(1){
 opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
<img src="logo2.png"/>
</div>
<button>swap logo</button>
</body>
</html>

solution 3 解决方案3

in this case the div container has the background of one of the logos,and a image inside. 在这种情况下，div容器具有徽标之一的背景和内部的图像。 it has also the same structure as your <center><img/></center> and could probably replace your existing code with less modifications. 它也具有与您的<center><img/></center>相同的结构，并且可能只需进行少量修改即可替换您现有的代码。 however the tag "center" is a old tag and shouldnt be used in modern websites. 但是，“中心”标记是一个古老的标记，不应在现代网站中使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
 width:128px;
 height:128px;
 background-image:url(logo2.png);
}
#logo>img{
 width:128px;
 height:128px;
 -webkit-transition:opacity 1s ease-in-out;
}
#logo.anotherLogo>img{
 opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
</div>
<button>swap logo</button>
</body>
</html>

*ifu wanta specific size of a background-image you can use the background-size css * ifu想要背景图像的特定大小，您可以使用背景大小的css

background-size:contain;

contain resizes the image so that the full image is insideyour div 包含调整图像的大小，以使整个图像位于您的div中

cover fills your container 盖子装满了您的容器

or you can also use width and height 或者您也可以使用宽度和高度

background-size:100px 100px;

if you want some more help for your multiswap function... just ask. 如果您需要更多有关多交换功能的帮助，请询问。

Javascript图像交换上的CSS过渡

问题描述

2 个解决方案

解决方案1
0 2013-06-18 10:48:39

解决方案2
0 2013-06-18 21:02:08

Javascript图像交换上的CSS过渡

问题描述

2 个解决方案

解决方案1 0 2013-06-18 10:48:39

解决方案2 0 2013-06-18 21:02:08

解决方案1
0 2013-06-18 10:48:39

解决方案2
0 2013-06-18 21:02:08