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

鼠标滑过时提示错误，不知道哪里原因啊

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
      *{
       margin: 0;
       padding: 0;
      }
      ul,li{
       list-style: none;
      }
      ul li{
       width: 200px;
       height: 100px;
       background: yellow;
       margin-bottom:20px;
       filter: alpha(opacity:30);
       border: 4px solid #000;
       filter: alpha(opacity:30);
        opacity: 0.3;
      }
</style>
<script>
window.onload=function(){
        var Li1=document.getElementById('li1');
        var Li2=document.getElementById('li2');
        Li1.onmouseover=function(){
          startMove(this,'opacity',100);
        }
        Li1.onmouseout=function(){
          startMove(this,'opacity',30);
        }
        
}
function getStyle(obj,attr){
        if(obj.currentStyle){
        return obj.currentStyle[attr];
        }else{
         return getComputedStyle(obj,false)[attr];
        }
     }
//var timer=0;
  var alpha=30;
function startMove(obj,attr,iTarget){
         clearInterval(obj.timer);
         obj.timer=setInterval(function(){
          var icur=0;
          if(attr=='opacity'){
            icur=Math.round(parseFloat(getStyle(obj.attr))*100);
          }else{
            icur=parseInt(getStyle(obj.attr));
          }
          //var icur=parseInt(getStyle(obj,attr));
          var speed=(iTarget-icur)/8;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);
          if(icur==iTarget){
          clearInterval(obj.timer);
          }else{
            if(attr=='opacity'){
              obj.style.filter='alpha(opacity:'+(icur+speed)+')';
              obj.style.opacity=(icur+speed)/100;
            }else{
              obj.style[attr]=icur+speed+'px';
            }
          }
         },30)
}

</script>
</head>
<body>
<ul>
      <li id="li1"></li>
</ul>
</body>
</html>

这是提示的错误，鼠标滑过就提示这个，然后背景色也没什么变化，实在不知道什么原因啊

qq_小狸猫_03724105

2016-10-18

源自：JS动画效果 4-4

关注问题我要回答

931

操作

收起

3 回答

颜色不一样的我回答被采纳 +3 积分
2016-10-18

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

margin: 0;

padding: 0;

}

ul,li{

list-style: none;

}

ul li{

width: 200px;

height: 100px;

background: yellow;

margin-bottom:20px;

filter: alpha(opacity:30);

border: 4px solid #000;

filter: alpha(opacity:30);

opacity: 0.3;

}

</style>

window.onload=function(){

var Li1=document.getElementById('li1');

var Li2=document.getElementById('li2');

Li1.onmouseover=function(){

startMove(this,'opacity',100);

}

Li1.onmouseout=function(){

startMove(this,'opacity',30);

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

//var timer=0;

var alpha=30;

function startMove(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var icur=0;

if(attr=='opacity'){

icur=Math.round(parseFloat(getStyle(obj.attr))*100); // 这行代码写错了getStyle(obj.attr)应该是getStyle(obj,attr) 是调用用 , 号不是.号

}else{

icur=parseInt(getStyle(obj.attr)); // 这个也是自己改过来

}

//var icur=parseInt(getStyle(obj,attr));

var speed=(iTarget-icur)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(icur==iTarget){

clearInterval(obj.timer);

}else{

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(icur+speed)+')';

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+'px';

}

},30)

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

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

收起回答

夜闻秋雨
2016-10-18

总觉得你似乎没有认真看啊，虽然我也没认真看就是了，比如，你定义了Li1和Li2，但是只用到Li1，又比如getStyle()方法的参数，你有时候写getStyle(obj.attr)，有时候写getStyle(obj,attr)，这两个的意义完全不一样了啊，先去吃饭，我也还没开始自己写，你自己再仔细看一下自己的代码吧