按照课程中的思路，我将alpha值设为浮点数，就会产生奇怪的事情。。。。。。
来源：2-2 JS透明度动画
传说中的小白龙
2016-05-18 21:39
<!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时停止这个例子都无法启动，然而写成整数又可以运行，头痛。
写回答
关注
1回答
-
- 传说中的小白龙
- 2016-05-18 22:35:47
想了半天！终于知道了！跟我一样的小伙伴不明白的快点进来看！
搞了半天，是javascript的问题，ｊｓ里浮点数运算有一些小问题．具体情况你们加载这段代码就明白了．真是巨坑无比！
var b = 0.3; for (var i = 0.1; i < 1; i=0.1){ b+=i; alert(b); }
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113924 学习 · 1443 问题
相似问题