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

首页课程实战体系课手记专栏慕课教程

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

来源：6-2 完美运动框架

夜樱四重奏

2018-06-13 11:31

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

写回答关注

4回答

Fishzz: 2018-06-19 00:41:23

修改后的代码:

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

0 1

Fishzz

2018-06-19 00:27:52
补充,你的另一些小错误:
代码块里
```
//你的代码
if(iCur == json[attr]){flag=false};
//正确代码
if(iCur != json[attr]){flag=false};
```
true写成了ture.
startMove(a,b,c,d)写成了startMove = (a,b,c,d)
还有一些没有写分号的错误,一行代码应该以括号或者分号结束.
1 0

Fishzz

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

2018-06-19 00:29:49

共 1 条回复 >

Fishzz: 2018-06-19 00:11:40

你的 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 0

夜樱四重奏

2018-06-13 11:33:59

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

JS动画效果

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

113923 学习 · 1443 问题

相似问题

回答 1

回答 1

回答 1

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

回答 3

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

回答 2

打开慕课网App查看更多内容