jscrip 透明度运动
红尘叶子
2016-01-25 16:51
/*我把老师的代码复制了下来，删除了不要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>
2回答
-
- qq_小天狼星_0
- 2016-02-22 00:19:48
这是因为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;
-
- teddy_tsui
- 2016-01-25 18:07:29
数据的问题，当alpha去到0.7之后就会变成0.79999999,所以最后alpha没有等于1 也就是if（alpha ==iTarget）没执行时钟没有被清楚。所以数值改成整型的，最后赋值时再除就好了。我理解是内部数据类型转换的问题吧
JS动画效果
113923 学习 · 1443 问题
相似问题