如何使用 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 事件?的主要内容,如果未能解决你的问题,请参考以下文章