<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淡入，淡出</title></head><body><div id="fade-obj" style="width:300px;height:300px;background:#000"></div><button id="fade-btn">淡出</button><script>var obj=document.getElementById("fade-obj");var btn=document.getElementById("fade-btn");//Chrom获取外联样式var opa=Number(getComputedStyle(obj, null).opacity);;// IE浏览器获取外联样式// var op = Number(fadeObj.currentStyle.opacity);console.log(opa);var timer,timer1;btn.onclick=function(){if(btn.textContent=="淡出"){btn.textContent="淡入"out();}else if(btn.textContent=="淡入"){btn.textContent="淡出";In();}}function out(){opa-=.1;btn.disabled=true;timer=setInterval(out,200);obj.style.opacity=opa.toString();if(opa<0){clearInterval(timer);btn.disabled=false;}}function In(){opa+=.1;btn.disabled=true;timer1=setInterval(In,200);obj.style.opacity=opa.toString();if(opa>1){clearInterval(timer1);btn.disabled=false;}}</script></body></html>
添加回答
举报
0/150
提交
取消