按照课程中的思路,我将alpha值设为浮点数,就会产生奇怪的事情。。。。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; opacity: 0.3; } </style> <script type="text/javascript"> window.onload = opacity; function opacity() { var div = document.getElementById('div'); div.onmouseover = function () { startOpa(); }; div.onmouseout = function () { startOpa(); }; } var timer = null; //alpha为页面设置初始不透明度值。 var alpha = 0.3; /*function startOpa(iTarget) { var div = document.getElementById('div'); clearInterval(timer); timer = setInterval(function () { var speed; //判断速度正负,也就是往透明走还是不透明走 if (iTarget > alpha) { speed = 0.05; }else { speed = -0.05; } //操作 if (alpha == iTarget) { clearInterval(timer); }else { alpha = speed + alpha; div.style.opacity = alpha; } },30); }*/ function startOpa() { var div = document.getElementById('div'); clearInterval(timer); timer = setInterval(function () { if (alpha == 1) { clearInterval(timer); }else { alpha = alpha + 0.01; div.style.opacity = alpha; } },250); } </script> </head> <body> <div id="div"></div> </body> </html>
注释的代码是写完的代码,我把它注释掉了然后就写一个开始渐变然后渐变到1时停止这个例子都无法启动,然而写成整数又可以运行,头痛。