请问透明度那块为什么会闪呢？
qq_Desperado_19
2016-09-11 20:46
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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>
3回答
-
- WindNite
- 2016-11-08 10:40:02
你可以先通过opacity，其的范围是在0~100.然后再在后面取了整的数转化为filter的。感觉还有些问题，还在研究
-
- 慕斯2996396
- 2016-09-13 13:35:12
因为这句if(parseInt(getstyle(obj,attr))==target)，透明度范围是0~1，经过parseInt取整后为0或1，得不到目标值0.3，所以不能停止，透明度一直变化
-
- 灿烂满天星
- 2016-09-13 13:05:52
没太明白
JS动画效果
113925 学习 · 1443 问题
相似问题