首页 > 代码库 > （38）JS运动之淡入淡出
（38）JS运动之淡入淡出
基本思路：使用样式filter，但是要区分IE浏览器和chrom、firefox的不同，具体也是用定时器来实现。
<!DOCTYPE HTML><!-- --><html><head><meta charset="utf-8"><title></title><style>#div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30);opacity:0.3;}</style> <script>window.onload=function (){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(100); }; oDiv.onmouseout=function () { startMove(30); };};var alpha=30;//透明度变量，因为样式那里初始是30var timer=null;function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(alpha<iTarget) { speed=1; } else{ speed=-1; } if(alpha==iTarget) { clearInterval(timer); } else { alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')';//IE的透明度 oDiv.style.opacity=alpha/100;//谷歌、火狐浏览器，满的值是1，不是100，因此除以100 } },30)}</script></head><body> <div id="div1"></div></body></html>效果图：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。