jscrip 透明度運(yùn)動(dòng)
/*我把老師的代碼復(fù)制了下來(lái),刪除了不要ie下的透明度alpha值,雖然實(shí)現(xiàn)了這個(gè)功能,但是透明度在onmouseover時(shí)會(huì)在1.1和1.0不停的跳動(dòng),在onmouseout時(shí)透明度會(huì)在0.2和0.3之間跳動(dòng),求解這是為啥*/
<!DOCTYPE html>
<html>
<head>
<title>透明度運(yùn)動(dòng)</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
這是因?yàn)镴S浮點(diǎn)數(shù)運(yùn)算不精準(zhǔn)的問(wèn)題,不精準(zhǔn)的原因是JS采用的是二進(jìn)制表示法,當(dāng)進(jìn)行浮點(diǎn)數(shù)運(yùn)算時(shí),會(huì)先把十進(jìn)制的小數(shù)換算為二進(jìn)制,再用二進(jìn)制進(jìn)行計(jì)算,最終結(jié)果轉(zhuǎn)換為十進(jìn)制,而部分小數(shù)是不能準(zhǔn)確換算為二進(jìn)制的。
例如把 0.1 和 0.2 轉(zhuǎn)換成二進(jìn)制:0.1 => 0.0001 1001 1001 1001…(無(wú)限循環(huán))
???????????????????????????????????????????????????0.2 => 0.0011 0011 0011 0011…(無(wú)限循環(huán))
雙精度浮點(diǎn)數(shù)的小數(shù)部分最多支持 52 位,所以0.1+0.2之后得到這么一串 0.0100110011001100110011001100110011001100110011001100 因浮點(diǎn)數(shù)小數(shù)位的限制而截?cái)嗟亩M(jìn)制數(shù)字,這時(shí)候,我們?cè)侔阉D(zhuǎn)換為十進(jìn)制,就成了 0.30000000000000004。
所以為了得到精準(zhǔn)的浮點(diǎn)數(shù)計(jì)算,解決你所說(shuō)的問(wèn)題,可以先把參數(shù)乘以10,運(yùn)算后再除以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
數(shù)據(jù)的問(wèn)題,當(dāng)alpha去到0.7之后就會(huì)變成0.79999999,所以最后alpha沒(méi)有等于1 也就是if(alpha ==iTarget)沒(méi)執(zhí)行時(shí)鐘沒(méi)有被清楚。所以數(shù)值改成整型的,最后賦值時(shí)再除就好了。我理解是內(nèi)部數(shù)據(jù)類型轉(zhuǎn)換的問(wèn)題吧