谁能告知我错在哪了？显示透明度不对呀
记忆1943
2016-09-28 15:27
<!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回答
-
- 五谷是花生红枣眼泪和小米
- 2016-09-28 17:01:31
错在这一行 icur=Math.round(parseFloat(getStyle(obj,attr)))*100;
应该改为 icur=Math.round ( (parseFloat(getStyle(obj,attr)))*100 );
也就是说先乘100，再进行四舍五入。
按照你原先的代码这个值一直为0，因为取出来是小数，四舍五入之后必然是0。
JS动画效果
113925 学习 · 1443 问题
相似问题