动画案例那一节的问题-慕课网

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

动画案例那一节的问题

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

慕用9244143

2017-04-05 18:11

图案的top值
a.从初始值20变到-25
b.再变为30
c.再由30变回20

我做出来的效果:
b和c是连续的，a和b+c之间要隔一会，就是说两个链式运动不连续，而且中途鼠标放上去就不能移出了，要不然abc整个过程就会中断，下一次鼠标放上去初始值就不是20，这应该是哪出问题了？

写回答关注

6回答

东方既白233

2017-04-09 16:47:35

已采纳

这是因为你要确定你设置的多运动都完成后才去清除定时器，这个flag就是用来判断你设置的所有运动，比如高度宽度透明度是否都达到了目标值，flag才为true，否则之前flag会变成flase，不执行清除定时器

1 1

东方既白23...

有问题可以互相关注讨论，我也是新手小白

2017-04-09 16:48:39

共 1 条回复 >
慕用9244143

2017-04-09 16:03:27

嗯，刚才粘错文件了，看了别人的提问，我的问题出在JS文件里，要把var flag=true;放在定时器里面，就解决了，可是还不太明白为什么

0 0
东方既白233

2017-04-09 15:41:55

var obj=document.getElementsByTagName("a");
for (var i = 0; i < obj.length; i++) {
obj[i].onmouseenter=function(){
var mu=this.getElementsByTagName("img")[0];
objMove(mu,{"top":-10,"opacity":0},5,function(){
mu.style.top=70+"px";
mu.style.opacity=0;
objMove(mu,{"top":12,"opacity":100},2);
});
};
};
};
对比一下，你就知道你写差中间两句了。

1 0

慕用9244...

嗯，刚才粘错文件了，看了别人的提问，我的问题出在JS文件里，要把var flag=true;放在定时器里面，就解决了，可是还不太明白为什么

2017-04-09 16:04:15

共 1 条回复 >
东方既白233

2017-04-09 15:33:10

window.onload=function(){
        var move=document.getElementById('move');
        var alis=move.getElementsByTagName('a');
        for (var i=0;i<alis.length;i++)
        {
            alis[i].onmouseover=function()
            {
                var ths=this.getElementsByTagName('i')[0];
                start(ths,{top:-25,opacity:0},function(){
                    start(ths,{top:20,opacity:100});
                });
            }
        }

    }

你这部分的代码写差了吧。还是说你自己复制张贴差了？

0 0

慕用9244143: 2017-04-09 15:26:37

<!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>无标题文档</title>
<style type="text/css">
div p{
	font-size:22px;
	font-family:"Courier";
}
a:hover{
	color:#39C;
}
div a{
	position:relative;
	cursor:pointer;
	display:inline-block;
	border:1px solid;
	background:#FFFFB0;
	width:120px;
	height:120px;
	
	text-align:center;
	margin:20px;
	border-radius:10px;
}

div a i{
	position:relative;
	top:20px;
	left:0px;
	width:100%;
	text-align:center;
	display:inline-block;
	opacity:1;
	filter:alpha(opacity=100);
}


#move{
	text-align:center;
	width:50%;
	height:80%;
	border-radius:10px;
	background:#E2E2E2;
}
</style>
<script src="linkMove.js"></script>
<script>
	window.onload=function(){
		var move=document.getElementById('move');
		var alis=move.getElementsByTagName('a');
		for (var i=0;i<alis.length;i++)
		{
			alis[i].onmouseover=function()
			{
				var ths=this.getElementsByTagName('i')[0];
				start(ths,{top:-25,opacity:0},function(){
					start(ths,{top:20,opacity:100});
				});
			}
		}
		
	}
</script>
</head>

<body>
<center>
<div  id="move">
<a><i><img src="icons/icon8.png"/></i><p>blossom</p></a>
<a><i><img src="icons/icon12.png" /></i><p>card</p></a>
<a><i><img src="icons/icon17.png" /></i><p>violin</p></a>
<a><i><img src="icons/icon14.png"/></i><p>airplane</p></a>
<a><i><img src="icons/icon13.png" /></i><p>lollipop</p></a>
<a><i><img src="icons/icon11.png" /></i><p>hamburger</p></a>


</div>
</center>

</body>
</html>

0 0

东方既白233

2017-04-08 15:28:26

麻烦上传下代码，你不上传看不来的

1 0

慕用9244...

在评论传了，代码和老师的基本一样

2017-04-09 15:27:41

共 1 条回复 >

JS动画效果

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

113910 学习 · 1502 问题

查看课程

相似问题

动画案例中

回答 1

Js动画效果案例

回答 1

想问一下这节的动画速度问题

回答 2

有人可以提供一下7-2jqurey动画案例的源代码么？

回答 1

请问有没有人有JS这个动画案例的图标和代码

回答 1

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