我想在不使用任何 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'>
(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"; } }(); }());
最佳答案
通过使用以下 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');
关于javascript - 如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7295705/