如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件?

Posted

技术标签:

【中文标题】如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件?【英文标题】:How can I change image with opacity transition in response to an onClick event using CSS3? 【发布时间】:2011-11-09 21:01:43 【问题描述】:

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

这是我的代码,它改变了图像但没有不透明度过渡。

#cf img.imgClass -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -o-transition:不透明度 2s 缓入出局; -ms-transition:不透明度 2s 缓入出局; 过渡:不透明 2s 缓入出局;

<_div id="cf"><_img id="imgId" src="%E7%85%A7%E7%89%87/IMG_0290.JPG">

(功能 ( ) document.getElementsByTagName('img')[0].onclick = function () 返回函数() var imgSrc = document.getElementById('imgId').src; (imgSrc.indexOf('IMG_0288.JPG') > 0) ? imgSrc = '照片/IMG_0290.JPG' : imgSrc = '照片/IMG_0288.JPG'; document.getElementById('imgId').src = imgSrc; document.getElementById('imgId').className = "imgClass"; (); ());

【问题讨论】:

【参考方案1】:

通过使用以下 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');

【讨论】:

【参考方案2】:

这个怎么样:

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

【讨论】:

我不想在悬停状态下应用事务效果,而是响应 onClick 事件。

以上是关于如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件?的主要内容,如果未能解决你的问题,请参考以下文章

Firefox上具有不透明度和z-index的意外(不工作?)css3过渡[重复]

通过过渡更改图像不透明度

多个 css3 过渡类型不使用“全部”

悬停时不透明度的 CSS3 过渡不起作用

CSS3 动画过渡:不透明度不起作用

透明背景div上的背景颜色过渡效果?