0

Javascript で別の画像セットと交換する一連の画像がありますが、2 つの画像間でスナップすると見苦しくなります。それらをフェードさせたいのですが、CSSのWebページの背景でこれを行うことができました。問題は、画像で動作させることができないことです。その理由はわかりません。

画像間で変更するスクリプトは次のとおりです。

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

それは文書の先頭にあります。次に、交換する画像の 1 つの例を示します。

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

これは、他の画像の 1 つでマウスオーバー イベントによってアクティブ化されます。変更箇所は全部で4箇所。最後に、トランジションをトリガーすると思われる 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;}

簡単に言うと、移行ルールを 1 つの CSS ルールにまとめ、それを各画像に関連付けました。どういうわけか間違ってリンクしましたか？なぜこれが機能しないのか理解できません..

4

2 に答える 2

0

CSS が「通過」できるのは CSS プロパティであり、 のような要素属性ではありませんsrc。

すべきことは、DOM に 2 つの画像 (現在の画像用と新しい画像用) を用意し、後者を前者にフェードさせることです。

このようなもの：

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;}
于 2013-06-18T10:48:39.880 に答える