Question

我有一组图像可以与Javascript中的另一组图像交换，但是当它在两个图像之间切换时看起来很难看。我希望它们消失，我已经设法用CSS中的网页背景做到这一点。麻烦的是，我无法让它在图像上工作，我不知道为什么。

这是在图像之间切换的脚本：

    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";
}

这是文件的头部。然后我们有一个要交换的图像的例子：

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

这是由其他一个图像上的鼠标悬停事件激活的。总共有四个要改变。最后，我认为会触发过渡的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;}

很简单，我将转换规则放在单个CSS规则中并将其归因于每个图像。我是否以某种方式错误地链接了它？我无法理解为什么这不起作用..

Answer 1

CSS可以“传输”的是CSS属性，而不是src等元素属性。

你应该在DOM中有两个图像，一个用于当前图像，一个用于新图像，并使后者淡入前一个图像。

这样的事情：

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);
    ...
}

这是CSS部分：

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

Answer 2

我已成功使用CSS中的网页背景

只有webkit浏览器支持后台淡入淡出过渡。所以，如果你想继续使用背景。假设要交换的徽标是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>

解决方案2，这个有更多支持（适用于大多数现代浏览器，而不仅仅适用于webkit浏览器）

这需要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>

解决方案3

在这种情况下，div容器具有其中一个徽标的背景，以及内部的图像。它也具有与<center><img/></center>相同的结构，并且可能用较少的修改替换现有代码。但标签“center”是一个旧标签，不应在现代网站中使用。

<!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想要背景图像的特定大小，您可以使用background-size css

background-size:contain;

包含调整图片大小，使整个图像位于div内部

封面填充您的容器

或者你也可以使用宽度和高度

background-size:100px 100px;

如果你想为你的多重交换功能提供更多帮助......请问。

Javascript图像交换上的CSS转换

2 个答案: