請問透明度那塊為什么會閃呢？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
ul,li{list-style:none}
ul li{
width: 200px;
height: 100px;
background: #03F;
margin-bottom: 10px;
opacity:0.3;
left: 0px;
top: 87px;
border:#000 5px solid;
}
</style>
<script>
window.onload=function(){
var ax=document.getElementById("01");
ax.onmouseover=function(){
startmove(this,"height",500)
}
ax.onmouseout=function(){
startmove(this,"height",100)
}
var bx=document.getElementById("02");
bx.onmouseover=function(){
startmove(this,"width",500)
}
bx.onmouseout=function(){
startmove(this,"width",200)
var cx=document.getElementById("03");
cx.onmouseover=function(){
startmove(this,"opacity",1)
}
cx.onmouseout=function(){
startmove(this,"opacity",0.3)
}
}
/*var ali=document.getElementsByTagName("li")
for(var i=0;i<ali.length;i++){
ali[i].timmer=null
ali[i].onmouseover=function(){
startmove(this,500)
}
ali[i].onmouseout=function(){
?startmove(this,200)
}
}*/
}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startmove(obj,attr,target){
clearInterval(obj.timmer);
obj.timmer=setInterval(function(){
var icur=0;
if(attr=="opacity"){
icur=parseFloat(getstyle(obj,attr))
}else{
icur=parseInt(getstyle(obj,attr))
}
var speed=(target-parseInt(getstyle(obj,attr)))/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(parseInt(getstyle(obj,attr))==target){
clearInterval(obj.timmer)
}
else{
if(attr=="opacity")
{
obj.style.opacity=icur+speed;
}else{
obj.style[attr]=icur+speed+"px";
}
}
},3)
}
</script>
</head>
<body>
<ul style="position: absolute; left: -73px; top: 7px;">
<li id="01"></li>
<li id="02"></li>
<li id="03"></li>
</ul>
</body>
</html>
2016-11-08
你可以先通過opacity，其的范圍是在0~100.然后再在后面取了整的數(shù)轉(zhuǎn)化為filter的。感覺還有些問題，還在研究
2016-09-13
因為這句if(parseInt(getstyle(obj,attr))==target)，透明度范圍是0~1，經(jīng)過parseInt取整后為0或1，得不到目標(biāo)值0.3，所以不能停止，透明度一直變化
2016-09-13
沒太明白