人生鼓励师
2016-03-29 22:32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> /*body,div{margin:0 padding:0}*/ #div1{ height:200px; width:200px; background:#F00; filter:alpha(opacity:30); opacity:0.3; } </style> <script type="text/javascript"> window.onlond = function(){ var div1=document.getElementById('div1'); div1.onmouseover=function(){ change(100); } div1.onmouseout=function(){ change(30); } } var timer=null; var alpha=30; function change(e){ var div1=document.getElementById('div1'); clearInterval(timer); var speed=0; timer=setInterval(function(){ if(alpha>e){ speed=-10; } else{ speed=10; } if(alpha == e){ clearInterval(timer); } else{ alpha+=speed; div1.style.filter ='alpha(opacity:'+alpha+')' ; div1.style.opacity = alpha/100; } },30) } </script> <body> <div id="div1"></div> </body> </html>
window.onload
这个写错了
JS动画效果
113925 学习 · 1443 问题
相似问题