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

麻烦帮忙看下，我写出来的代码没有效果

<!DOCTYPE html>

<html>

<head>

*{margin: 0; padding: 0;}

ul,li{list-style: none;}

ul li{width:200px;height:100px;background:yellow;opacity:0.3;filter:alpha(opacity:30);border: #ccc 4px solid;}

</style>

</head>

window.onload = function(){

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

oLi.onmouseover = function(){

startMove=(oLi,{width:400,height:200,opacity:100});

}

oLi.onmouseout = function(){

startMove=(oLi,{width:200,height:100,opacity:30});

}

</script>

<body>

<ul>

</ul>

</body>

</html>

夜樱四重奏

2018-06-13

源自：JS动画效果 6-2

关注问题我要回答

1155

操作

收起

4 回答

Fishzz
2018-06-19

修改后的代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    *{margin: 0; padding: 0;}
    ul,li{list-style: none;}
    ul li{width:200px;height:100px;background:yellow;opacity:0.3;filter:alpha(opacity:30);border: #ccc 4px solid;}
  </style>
 </head>
 <script type="text/javascript"  >
  function startMove(obj, json, fn) {	
   clearInterval(obj.timer);		
   obj.timer = setInterval(function() {		
    var flag = true;		
    for(var attr in json) {	
     //目标值	
     var iCur = 0;	
     if(attr == 'opacity') {		
      iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100);		
     } else {	
      iCur = parseInt(getStyle(obj,attr));		
     }				
     //speed		
     var iSpeed = (json[attr] - iCur) / 8;		
     iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);				
     //stop		
     if(iCur != json[attr]) {		
      flag = false;		
     }		
     if(attr == 'opacity') {		
      obj.style.filter = 'alpha(opacity:'+ (iCur + iSpeed) +')';		
      obj.style.opacity = (iCur + iSpeed) / 100;		
     } else {		
      obj.style[attr] = iCur + iSpeed + 'px';		
     }	
    }	
    if(flag){	
     clearInterval(obj.timer);	
     if(fn){		
      fn();		
     }	
    }		
   }, 30)
  }
  function getStyle(obj, attr) {
   if(obj.currentStyle) {
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
 </script>
 
 <script>
  window.onload = function(){
   var oLi=document.getElementById('li1');
   oLi.onmouseover = function(){
    startMove(oLi,{width:400,height:200,opacity:100});
   }
   oLi.onmouseout = function(){
    startMove(oLi,{width:200,height:100,opacity:30});
   }
  }
 </script>
 <body>
  <ul>
   <li id="li1"></li>
  </ul>
 </body>
</html>

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

收起回答

Fishzz
2018-06-19

补充,你的另一些小错误:

代码块里

//你的代码
if(iCur == json[attr]){flag=false};
//正确代码
if(iCur != json[attr]){flag=false};

true写成了ture.

startMove(a,b,c,d)写成了startMove = (a,b,c,d)

还有一些没有写分号的错误,一行代码应该以括号或者分号结束.

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

收起回答

Fishzz

还有最后一个 obj.timer写成了obj,timer

2018-06-19 回复有任何疑惑可以回复我~

Fishzz
2018-06-19

你的 flag代码位置存在错误.

function(){
    var flag = true;
    for(i in json){
        //your codes
        if(flag){
            clearInterval(obj.timer)
        }
    }
}

正确的结构应该是:

1,设置flag.

2,for in循环你的代码.

3,判断flag

即如下:

function(){
    flag = true
    for(i in json){
        //你的代码
    }
    if(flag){clearInterval(obj.timer)}
}

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

收起回答

夜樱四重奏提问者
2018-06-13

function startMove(obj, json, fn) {

clearInterval(obj, timer);

obj.timer = setInterval(function() {

var flag = ture;

for(var attr in json) {

//目标值

var iCur = 0;

if(attr == 'opacity') {

iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100);

} else {

iCur = parseInt(getStyle(obj,attr));

}

//speed

var iSpeed = (json[attr] - iCur) / 8;

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

//stop

if(iCur == json[attr]) {

flag = false;

}

if(attr == 'opacity') {

obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';

obj.style.opacity = (iCur + iSpeed) / 100;

} else {

obj.style[attr] = iCur + iSpeed + 'px'

}

if(flag){

clearInterval(obj.timer);

if(fn){

fn();

}

}, 30)

}

function getStyle(obj, attr) {

if(obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

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

收起回答

0/150

提交

取消

JS动画效果

参与学习 113936 人
解答问题 1443 个

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

进入课程

本课相似问答

1 回答求助，帮忙看下，怎么移出没有效果谢谢

1 回答麻烦大家帮忙看看代码的错误！谢谢了

3 回答代码写入for循环就没有效果，把每一项单独写出来能出现效果，这是为什么？

1 回答求大神帮忙看看为什么没效果

2 回答求大神帮看看哪里写错了？没有效果

搜索更多本课相关问答

麻烦帮忙看下，我写出来的代码没有效果

我要回答关注问题

热搜

最近搜索清空

麻烦帮忙看下，我写出来的代码没有效果

4 回答

本课相似问答

麻烦帮忙看下，我写出来的代码没有效果