为了账号安全,请及时绑定邮箱和手机立即绑定

透明度opacity值不稳定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#boss{

width:300px;

height:300px;

background:#CF3;

opacity:0.3}

</style>

<script type="text/javascript">

window.onload=function(){

var boss=document.getElementById('boss'),timer=null,alpha=30;

boss.onmouseover=function()

{

opa(100);

}

boss.onmouseout=function()

{

opa(30);

}

function opa(itarget){

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(alpha>itarget)

speed=-10;

else 

speed=10;

if(boss.style.opacity==itarget)

clearInterval(timer);

else{

alpha+=speed;

boss.style.filter='alpha(opactiy:'+alpha+');'

boss.style.opacity=alpha/100;

}

},30)

}

}

</script>

</head>


<body>

<div id="boss">

</div>

</body>

</html>

我的代码,和老师讲的几乎一样啊,为什么透明度在1和0.3左右的一直在变

正在回答

1 回答

if(boss.style.opacity==itarget)

clearInterval(timer);

 这块没能清除 计时器,

boss.style.opacity 他算出的是浮点数就是0.3不可能等于itarget30。把他换成alpha 就好了。

0 回复 有任何疑惑可以回复我~
#1

Dream0703 提问者

谢谢大神
2016-05-12 回复 有任何疑惑可以回复我~
#2

lzlbu2 回复 Dream0703 提问者

timer=setInterval(function(){ var speed=0; if(alpha>iTarget){ speed=-0.1; }else{ speed=0.1; } if(oDiv.style.opacity==iTarget){//如果此处使用alpha==iTarget会造成opacity达到边界值时透明度不稳定??? clearInterval(timer); }else{ alpha+=speed; oDiv.style.opacity=alpha; } },30);
2016-05-12 回复 有任何疑惑可以回复我~
#3

lzlbu2 回复 Dream0703 提问者

我的正好相反,为什么使用alpha==iTarget会造成到达边界的时候透明度不稳定?
2016-05-12 回复 有任何疑惑可以回复我~
#4

lzlbu2

我的正好相反,请问为什么使用alpha==iTarget会造成到达边界的时候透明度不稳定?而使用oDiv.style.opacity==iTarget则达到效果?
2016-05-12 回复 有任何疑惑可以回复我~
#5

Dream0703 提问者 回复 lzlbu2

用alpha==iTarget这个是稳定的
2016-05-13 回复 有任何疑惑可以回复我~
#6

lzlbu2 回复 Dream0703 提问者

嗯嗯 谢谢 我找到问题在哪了
2016-05-13 回复 有任何疑惑可以回复我~
#7

Dream0703 提问者 回复 lzlbu2

那就好
2016-05-14 回复 有任何疑惑可以回复我~
查看4条回复

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

透明度opacity值不稳定

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信