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

透明度一直闪?


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #box1{

            width: 400px;

            height: 400px;

            background-color: blueviolet;

            opacity: 0.3;

        }

    </style>

    <script>

        window.onload = function(){

            var box1 = document.getElementById("box1");

            box1.onmouseover =function(){

                move(1);

            };

            box1.onmouseout =function(){

                move(0.3);

            }

        }

        var timer = null;

        var opacity=0.3;

        function move(itarget){

            clearInterval(timer);

            var box1 = document.getElementById("box1");

            timer=setInterval(function(){

                var speed;

                if(opacity>itarget){

                    speed=-0.1

                }

                else{

                    speed=0.1;

                };

                if(opacity==itarget){

                    clearInterval(timer);

                }

                else{

                    opacity+=speed;

                    box1.style.opacity = opacity;

                }

            },100)

        }

    </script>

</head>

<body>

    <div id="box1"></div>

</body>

</html>

透明度一直在1-1.1闪

往下的时候一直在0.3-0.2一直闪

求解

2;

正在回答

2 回答

先说原因:由于小数在计算时会先转换为二进制,存在精度丢失。

JS的小数运算常用的方法有两种:

  1. 1. 先转成整数,例如代码里的乘以100的做法

  2. num.toFixed()方法,指定保留的小数位数,在截取时会进行四舍五入。


实际上,无论移入移出鼠标,都在抖动的。

下面是控制台输出的透明度。

1.移入鼠标的透明度

http://img1.sycdn.imooc.com//5edf79af000158a303760222.jpg

2.移出鼠标的透明度

http://img1.sycdn.imooc.com//5edf79af00013c0c03220190.jpg


0 回复 有任何疑惑可以回复我~
css加filter:alpha(opacity:30);
第一个move值 move(100);
第二个move值 move(30);
var speed=0;
 if(opacity>itarget)
 {speed=-10; }                
 else{speed=10;};
  box1.style.opacity = opacity/100;


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

举报

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

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

进入课程

透明度一直闪?

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