                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

求助无法渐变而且会闪怎么回事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
 ul,li{
            list-style:none;
 }
        ul li{
            margin-right:20px;
 width:200px;
 height:200px;
 float:left;
 background: brown;
 opacity:0.3;
 }
    </style>
    <script type="text/javascript">
 window.onload = function () {
            var aLi = document.getElementsByTagName("li");
 for (var i = 0; i < aLi.length; i++) {
                aLi[i].timer = null;
 aLi[i].alpha = 0.3;
 aLi[i].onmouseover = function(){
                    startMove(this,1);

 }
                aLi[i].onmouseout = function(){
                    startMove(this,0.3);
 }
            }
        }

        function startMove(obj,iTarget){
            clearInterval(obj.timer);

 obj.timer = setInterval(function(){
                var speed = 0;
 if(iTarget>obj.alpha){
                    speed = 0.1;
 }
                else {
                    speed = -0.1;
 }
                if(obj.alpha == iTarget){
                    clearInterval(obj.timer)
                }
                else{
                    obj.alpha += speed;
 obj.style.opacity = obj.alpha ;
 }

            },10)
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

serebi

2016-05-08

源自：JS动画效果 4-1

关注问题我要回答

414

操作

收起

1 回答

漫步人生路他爸爸回答被采纳 +3 积分
2016-05-08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
 ul,li{
            list-style:none;
 }
        ul li{
            margin-right:20px;
 width:200px;
 height:200px;
 float:left;
 background: brown;
 opacity:0.3;
 }
    </style>
    <script type="text/javascript">
 window.onload = function () {

            var aLi = document.getElementsByTagName("li");
 for (var i = 0; i < aLi.length; i++) {
                aLi[i].timer = null;

 aLi[i].alpha = 0.3;
 aLi[i].onmouseover = function(){
                    startMove(this,1);
 
 }
                aLi[i].onmouseout = function(){
                    startMove(this,0.3);
 }
            }
        }
 
        function startMove(obj,iTarget){
            clearInterval(obj.timer);

 obj.timer = setInterval(function(){
           var speed = 0;      
 if(iTarget>obj.alpha){
                    speed = 0.1;
 }
                else {
                    speed = -0.1;
 }
                if(obj.alpha == iTarget){
                    clearInterval(obj.timer)
                }
                else{
            //alert(obj.alpha);
                   obj.alpha = Math.round((obj.alpha + speed)*10)/10;
 obj.style.opacity = obj.alpha ;

 }
 
            },50)
        }
    </script>
</head>
<body>
<ul>
    <li></li><li></li><li></li><li></li>
  
</ul>
</body>
</html>

我把你的obj.alpha += speed;改成了obj.alpha = Math.round((obj.alpha + speed)*10)/10;
就可以了
具体为什么会出错是因为计算机成生小数的过程有可能有点偏差,你要拿3也许它给的是3.000000...004所以我们四舍五入一下就好了