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

谁能告知我错在哪了?显示透明度不对呀

<!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">

*{margin:0;padding:0}

ul,li{list-style:none}

ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid #000;font-size:12px;filter:alpha(opacity:30);opacity:0.3;}

</style>

<script>

window.onload=function(){

   var li1=document.getElementById('Li1');

   li1.onmouseover=function(){ 

        //startMove(this,'width',400); //移入时宽变为400

        startMove(this,'opacity',100);

   }

    li1.onmouseout=function(){ 

        //startMove(this,'width',200); //移出时宽变为200

        startMove(this,'opacity',30);

   }

}

//var timer=null;

var alpha=30;

function startMove(obj,attr,target){  //增加一个参数attr,用于传导宽或高'width'或'height'

   clearInterval(obj.timer);//先关闭定时器

   obj.timer=setInterval(function(){  //打开定时器 

       var icur=0;

       if(attr=='opacity'){ 

      icur=Math.round(parseFloat(getStyle(obj,attr)))*100;

  }else{ 

      icur=parseInt(getStyle(obj,attr))

  }

       var speed=(target-icur)/8;

  speed=speed>0?Math.ceil(speed):Math.floor(speed);

  if(icur==target){ 

     clearInterval(obj.timer);

  }else{ 

      if(attr=='opacity'){

  obj.style.filter='alpha(opacity:'+(icur+speed)+')';

  obj.style.opacity=(icur+speed)/100;

}

  else{

      obj.style[attr]=icur+speed+'px'; //缓冲移动,因['width']相当于.width,故用[attr]

  }

}

   },30)

}

/* 获取任意浏览器兼容下的样式的代码*/

function getStyle(obj,attr){ 

   if(obj.currentStyle){ return obj.currentStyle[attr];

   }

   else{ return getComputedStyle(obj,false)[attr];

   }

}

</script>

</head>


<body>


<ul>

   <li id="Li1">现在</li>

</ul>

</body>

</html>


正在回答

1 回答

错在这一行      icur=Math.round(parseFloat(getStyle(obj,attr)))*100;

应该改为         icur=Math.round   (   (parseFloat(getStyle(obj,attr)))*100   );

也就是说先乘100,再进行四舍五入。  

按照你原先的代码这个值一直为0,因为取出来是小数,四舍五入之后必然是0。


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

记忆1943 提问者

谢谢您,已经知道!
2016-09-30 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

谁能告知我错在哪了?显示透明度不对呀

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