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

课程

/前端开发

/JavaScript

/JS动画效果

能帮我看一下代码吗，我就是将老师最后讲完的完美框架想课后再试一试链式动画和多物体动画，发现都会出现问题啊

问题1

如题，不能鼠标移入一次就可以先宽再高再透明度，而是需要分别移入三次，谁能帮我看一下啊，痛苦了好久，谢谢拉！！！


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

  #div1{

  margin-bottom:10px;

  width: 100px;

  height:100px;

  background: yellow;

  border: 5px solid #000;

  opacity: 0.3;

  border-radius: 10px;

 }

</style>

<script type="text/javascript" src="move.js"></script>

<script type="text/javascript">

window.onload=function(){

var odiv=document.getElementById("div1");

odiv.onmouseover=function(){

startmove(odiv,{width:200},function(){

startmove(odiv,{height:200},function(){

startmove(odiv,{opacity:100});

});

});

}

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>


问题2

同一个文件中，我又写了以下代码，还是发现有问题，这是怎么回事呢

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

var oli=document.getElementsByTagName('li');

for (var i = 0; i < oli.length; i++) {

oli[i].onmouseover=function(){

startmove(this,{width:400});

}

}


小喜蛋

2014-11-26

源自：JS动画效果

关注问题 我要回答
1450
操作
收起

正在回答

6 回答

快乐的小牛妞
2014-11-28

第一个问题，你看你的标杆设置在什么地方了？一进来就假定所有的运动都到达了目标值，那肯定你执行一次就停止了。应该是在启动定时器之后设置。54782086000160a305000194.jpg

0 回复 有任何疑惑可以回复我~
收起回答
#1

小喜蛋 提问者

非常感谢！
2014-11-28 回复 有任何疑惑可以回复我~
快乐的小牛妞
2014-11-28

你的这个代码报这个错Uncaught SyntaxError: Unexpected end of input是你代码写的不规范，其中的某条语句，没有正常结束或者部分语句“‘’”双引号，单引号没有配对好，被转义了之类的错误造成的

54781d30000103e505000204.jpg

看到红色的{}了吗，你少了结尾的},好好对比一下你的代码就会知道。

ps:今后再遇到类似的错误，如果不知道什么意思，可以百度一下。。

谢谢。

0 回复 有任何疑惑可以回复我~
收起回答
#1

小喜蛋 提问者

谢谢老师！！！
2014-11-28 回复 有任何疑惑可以回复我~
小喜蛋 提问者
2014-11-27

老师，想同时控制一个ul中的li动画，我还是出错的，代码如下图，您能帮忙看一下吗，这次调试的结果截图也附上来，我检查了半天没有查出来不规范的地方。。。自己是一名新手，希望老师您可以抽空看一下，谢谢老师

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>!!!final-test</title>
<style type="text/css">
 body{
  margin:10px;
  padding:0px;
  background: #eee;
 }
 ul{
  list-style: none;
  margin:0px;
  padding: 0px;
 }
 li{
  margin:0px 10px 10px 0px;
 }
 #obj1 li{
  width: 200px;
  height: 100px;
   background: blue;
   border: 5px solid #000;
   opacity:0.3;
   border-radius: 10px;
 }
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function(){
var obj1=document.getElementById("obj1");
var oli=document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].onmouseover=function(){
startmove(this,{width:400});
};
}
</script>
</head>
<body>
<ul id="obj1">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

547701b000013b8a05000282.jpg


0 回复 有任何疑惑可以回复我~
收起回答
小喜蛋 提问者
2014-11-27 
//获取样式函数,如果是在内联样式中，可以直接通过style属性获取样式，但是如果是在外部定义的css，则需要getstyle获取样式的属性
function getstyle(obj,attr){
		//针对ie浏览器
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		//针对firefox以及chrome浏览器
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}

//startmove(obj,{attr1:itarget1, attr2:itarget2},fn)
//json可方便调用多个属性样式，可以同时做多个动画
function startmove(obj,json,fn){
		var flag=true;//设立一个标杆，假设所有的运动都到达了目标值
		clearInterval(obj.timer);//为了防止控制多个物体时出现错误，将timer指定为各自的对象
		//开启定时器
		obj.timer=setInterval(function(){
			//遍历json的属性
			for(var attr in json){
			//取当前的值
			var icur=0;
			if (attr=='opacity') {
				icur=Math.round(parseFloat(getstyle(obj,attr))*100);
				//getstyle()只是获取了样式属性，但只是一个字符串，不能直接参与运算，所以需要将其变为parsefloat解析为小数，为避免小数运算产生的错误，要将其四舍五入，同时先乘以100，最后再除以100得到结果
			}
			else{
				icur=parseInt(getstyle(obj,attr));
			}

			//算速度
			//itarget换为json[attr],是哪个属性，就换为json哪个属性的目标值
			var speed=(json[attr]-icur)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);

			//检测停止
			if (icur!=json[attr]) {
				flag=false;
			}
			if (attr=='opacity') {
				obj.style.opacity=(icur+speed)/100;
			}
			else{
				obj.style[attr]=icur+speed+'px';
			}   //这一种和上一行的写法都是ok的
			}//针对的是json的函数遍历
			if (flag) {
				clearInterval(obj.timer);
				if(fn){
					fn();
				}
			};
		},30)
	}

我把您的这段代码试过了还是移入一次一个属性变化一次。F12调试的时候也没有报错，这是我的move.js部分，老师您能抽空看一下吗

0 回复 有任何疑惑可以回复我~
收起回答
快乐的小牛妞
2014-11-27 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<style type="text/css">
  #div1{
  margin-bottom:10px;
  width: 100px;
  height:100px;
  background: yellow;
  border: 5px solid #000;
  opacity: 0.3;
  border-radius: 10px;
 }
</style>
<script src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div1");
odiv.onmouseover=function(){
startMove(odiv,{width:200},function(){
startMove(odiv,{height:200},function(){
startMove(odiv,{opacity:100});
});
});
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

按照你的代码，我运行了一遍，没有问题，是先变宽再变高，最后变透明的。。只需鼠标移入一次。。你按F12查看一下是否报错，报什么错，有什么提示。。

1 回复 有任何疑惑可以回复我~
收起回答
#1

小喜蛋 提问者

老师老师，您看底下我的回答，那是问题，因为代码可以格式化，方便您看我就先发到那里了
2014-11-27 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

本课相似问答

8 回答完美运动框架，不能实现链式运动哇！

2 回答怎么实现多物体链式动画

2 回答完美运动框架 当不用onnmouseout时，鼠标离开再放上去时会把链式动画重新走一变，这是bug吗

1 回答设置了flag之后，这个框架的链式动画功能就失效了。

2 回答老师的完美运动框架有bug
搜索更多本课相关问答

能帮我看一下代码吗，我就是将老师最后讲完的完美框架想课后再试一试链式动画和多物体动画，发现都会出现问题啊

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