如何使用CSS3更改带有不透明度转换的图像以响应onClick事件？-Java 学习之路

我想在不使用任何javascript框架的情况下使用CSS3更改带有不透明度转换的图像以响应onClick事件 .

这是我的代码，它改变了图像但没有不透明度转换 .

#cf img.imgClass {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

<_div id =“cf”> <_img id ='imgId'src ='photos / IMG_0290.JPG'> </ _ div>

(function ( ) {
    document.getElementsByTagName('img')[0].onclick = function () {
        return function () {
            var imgSrc = document.getElementById('imgId').src;
            (imgSrc.indexOf('IMG_0288.JPG') > 0) ? imgSrc = 'photos/IMG_0290.JPG' : imgSrc = 'photos/IMG_0288.JPG'; 
            document.getElementById('imgId').src = imgSrc;
            document.getElementById('imgId').className = "imgClass";
        }
    }();
}());

2 回答

通过使用以下javascript函数它可以工作，但它可能只使用CSS？

如果有，怎么样？

function fade (id) {
    var dom = document.getElementById(id),
        level =1,
        step = function (){
            var h = level.toString(10);
            dom.style.opacity = h / 10;
            if (level < 10) {
                level += 1;
                setTimeout(step, 100);
            }
        }
    step();
}
fade('cf');

回复于 2024-05-04T08:32:17+08:00

这个怎么样：

#cf img.imgClass {opacity on css}
#cf img.imgClass:hover {opacity off css}

回复于 2024-05-04T08:32:17+08:00

如何使用CSS3更改带有不透明度转换的图像以响应onClick事件？

2 回答

相关问题