（38）JS运动之淡入淡出

来源：互联网发布：淘宝怎么申请淘宝达人编辑：程序博客网时间：2024/06/08 20:05

基本思路：使用样式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>

效果图：

16 2