javascript实现图片的淡入淡出
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) }
效果:
基本就这样滴呀,这个并不是特别难滴呀;没啥好说的,当一个记录吧
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步