javascript实现图片的淡入淡出
这个只是一个简单的实例,后面我会加强滴
我们以div例子:
html:
<div id="content"> </div>
css:
#content{ height:200px; width:200px; background:green; position:absolute; filter:alpha(opacity:30); opacity:0.3; top:100px; left:0px; cursor:pointer; }
javascript:
function showInfo(iTarget){ var obj=document.getElementById("content"); if((iTarget-alpha)>0){ //判断变化的方向滴呀 speed=10; }else{ speed=-10; } clearInterval(Timer); Timer=setInterval(function (){ if(alpha==iTarget){ //这里我们用的是变量滴呀 clearInterval(Timer); }else{ alpha+=speed; //这个是兼容我们的ie滴哎呀 obj.style.filter="alpha(opacity:"+speed+")"; //这个兼容的是我们的火狐和google滴呀 obj.style.opacity=alpha/100; } },30) }
效果:
基本就这样滴呀,这个并不是特别难滴呀;没啥好说的,当一个记录吧