按照课程中的思路,我将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时停止这个例子都无法启动,然而写成整数又可以运行,头痛。