标签：timer div color 透明 多次 javascrip text change 运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现透明度渐变动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:200px;background-color:red;filter:alpha(opacity=30);opacity:0.3;} </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById(‘box‘); box.onmouseover = function(){ changeopa(100); } box.onmouseout = function(){ changeopa(30); } } var timer; var opa=30; function changeopa(aim){ var box = document.getElementById(‘box‘); clearInterval(timer); timer=setInterval(function(){ if(opa==aim){ clearInterval(timer); }else{ opa+=(aim-65)/3.5; box.style.opacity=opa/100; box.style.filter=‘alpha(opacity=‘+opa+‘)‘; console.log(opa); } },30) } </script> </head> <body> <div id="box"></div> </body> </html>
遇到的问题及注意事项：
1、浮点运算进行多次后会出现误差，尽量使用整数运算。
标签：timer div color 透明 多次 javascrip text change 运算
原文地址：http://www.cnblogs.com/oliverliu/p/6857111.html
