jscrip 透明度運動
/*我把老師的代碼復制了下來，刪除了不要ie下的透明度alpha值，雖然實現了這個功能，但是透明度在onmouseover時會在1.1和1.0不停的跳動，在onmouseout時透明度會在0.2和0.3之間跳動，求解這是為啥*/
<!DOCTYPE html>
<html>
<head>
<title>透明度運動</title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0; padding:0;}
#div1{width:500px; height:500px; background: #F00; opacity:0.3;}
</style>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
div1.onmouseover = function(){
startMove(1);
}
div1.onmouseout = function(){
startMove(0.3);
}
}
var timer = null;
var alpha = 0.3;
function startMove(iTarget){
var div1 = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha < iTarget){
speed = 0.1;
} else {
speed = -0.1;
}
if(alpha == iTarget){
clearInterval(timer);
} else {
//alpha += speed;
//div1.style.filter = 'alpha(opacity:'+alpha+')';
div1.style.opacity = (alpha += speed);
}
},30);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
2016-02-22
這是因為JS浮點數運算不精準的問題，不精準的原因是JS采用的是二進制表示法，當進行浮點數運算時，會先把十進制的小數換算為二進制，再用二進制進行計算，最終結果轉換為十進制，而部分小數是不能準確換算為二進制的。
例如把 0.1 和 0.2 轉換成二進制：0.1 => 0.0001 1001 1001 1001…（無限循環）
???????????????????????????????????????????????????0.2 => 0.0011 0011 0011 0011…（無限循環）
雙精度浮點數的小數部分最多支持 52 位，所以0.1+0.2之后得到這么一串 0.0100110011001100110011001100110011001100110011001100 因浮點數小數位的限制而截斷的二進制數字，這時候，我們再把它轉換為十進制，就成了 0.30000000000000004。
所以為了得到精準的浮點數計算，解決你所說的問題，可以先把參數乘以10，運算后再除以10.
div1.onmouseover = function(){
startMove(10);
}
div1.onmouseout = function(){
startMove(3);
}
var timer = null;
var alpha = 3;
if(alpha < iTarget){
speed = 1;
} else {
speed = -1;
}
alpha += speed;
div1.style.opacity = alpha/10;
2016-01-25
數據的問題，當alpha去到0.7之后就會變成0.79999999,所以最后alpha沒有等于1 也就是if（alpha ==iTarget）沒執行時鐘沒有被清楚。所以數值改成整型的，最后賦值時再除就好了。我理解是內部數據類型轉換的問題吧