<!DOCTYPE html><html><head><meta charset="UTF-8"><title>透明度動畫</title><style type="text/css">? ? ?body,div{? ? ? margin: 0;? ? ? padding: 0;? ? ?}? ? ? #div1{? ? ? ?width: 200px;? ? ? ?height: 200px;? ? ? ?background-color: red;? ? ? ?filter:alpha(opacity:30);/*透明度是30*/? ? ? ?opacity: 0.3;? ? ? }</style><script type="text/javascript">? ? ? ? ?//任務：當鼠標移到時：透明度為100；當鼠標退出時，透明度還原。? ? ? ?window.onload=function(){? ? ? ? ??var ? oDiv=document.getElementById("div1")? ? ? ? ??//當鼠標移入時執行startMOve函數? ? ? ? ??oDiv.onmouseover=function(){? ? ? ? ?? startMOve(100);? ? ? ? ??}? ? ? ? ??//當鼠標移出時也執行startMOve函數? ? ? ? ??oDiv.onmouseout=function(){? ? ? ? ?? startMOve(30);? ? ? ? ??}? ? ? ?}? ? ? ? ? ? var ?timer=null;? ? ? ? ? ? var ? alpha=30;? ? ? ? ? ?function startMove(iTarget){? ? ? ? ? ? ? ? var ?oDiv=getElementById("div1");? ? ? ? ? ? ? ? clearInterval();//關閉定時器,防止疊加? ? ? ? ? ? ? ? //再開一個定時器? ? ? ? ? ? ? ?timer= ? setInterval(function(){? ? ? ? ? ? ? ? ? ? ? ?//判斷速度? ? ? ? ? ? ? ? ? ? ? ?var ?speed=0;? ? ? ? ? ? ? ? ? ? ? ?if (alpha>iTarget) {? ? ? ? ? ? ? ? ? ? ? ? speed=-10;? ? ? ? ? ? ? ? ? ? ? ?}else{? ? ? ? ? ? ? ? ? ? ? ? speed=10;? ? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ? ? if (alpha==iTarget) {? ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(timer);? ? ? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ? ?alpha+=speed;? ? ? ? ? ? ? ? ? ? ? ? oDiv>style.filter='alpha(opacity:'+alpha+')';? ? ? ? ? ? ? ? ? ? ? ? oDiv.style.opacity=alpha/100;? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ?} ,30 )//每隔30毫秒去執行? ? ? ? ? ?}</script></head><body><div id="div1"></div></body></html>搜狗瀏覽器，為什么透明度動畫無法改變？？？求教
搜狗瀏覽器，為什么透明度動畫無法改變？？？
xue111
2015-12-29 12:56:15
