<!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>搜狗浏览器，为什么透明度动画无法改变？？？求教
添加回答
举报
0/150
提交
取消