叶绿体线粒体
2016-08-03 20:29
<!DOCTYPE html> <html xmlns="http://"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta> <!-- 可让中文正常显示 --> <title>鼠标滑过改变透明度</title> <link href="css/main.css" rel="stylesheet" /> <style type="text/css"> #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 timer=null; var alpha=30; function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); //再声明一次,因为不是全局变量 timer=setInterval(function(){ var speed=0; if (alpha>iTarget) { speed=-10; } else if(alpha<iTarget){ speed=10; } if (alpha==iTarget) { clearInterval(timer); } else{ alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; //火狐或者chrome浏览器才能正常显示 } },30) } </script> </head> <body> <div id="div1" ></div> </body> </html>
想知道我这代码哪里错了,在360浏览器和chrome都执行没效果啊,看不出来透明度变化
1.删除 37行else if(alpha<iTarget)的 if(alpha<iTarget)
2.在26行加一个}
JS动画效果
113925 学习 · 1443 问题
相似问题