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

请问透明度那块为什么会闪呢?

<!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 回答

你可以先通过opacity,其的范围是在0~100.然后再在后面取了整的数转化为filter的。感觉还有些问题,还在研究

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

因为这句if(parseInt(getstyle(obj,attr))==target),透明度范围是0~1,经过parseInt取整后为0或1,得不到目标值0.3,所以不能停止,透明度一直变化

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

没太明白

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

举报

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

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

进入课程

请问透明度那块为什么会闪呢?

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