                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

動畫案例那一節的問題

圖案的top值
a.從初始值20變到-25
b.再變為30
c.再由30變回20

我做出來的效果:
b和c是連續的，a和b+c之間要隔一會，就是說兩個鏈式運動不連續，而且中途鼠標放上去就不能移出了，要不然abc整個過程就會中斷，下一次鼠標放上去初始值就不是20，這應該是哪出問題了？

慕用9244143

2017-04-05

源自：JS動畫效果 6-2

關注問題我要回答

1069

操作

收起

6 回答

東方既白233 回答被采納 +3 積分
2017-04-09

這是因為你要確定你設置的多運動都完成后才去清除定時器，這個flag就是用來判斷你設置的所有運動，比如高度寬度透明度是否都達到了目標值，flag才為true，否則之前flag會變成flase，不執行清除定時器

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

收起回答

東方既白233

有問題可以互相關注討論，我也是新手小白

2017-04-09 回復有任何疑惑可以回復我~

慕用9244143 提問者
2017-04-09

嗯，剛才粘錯文件了，看了別人的提問，我的問題出在JS文件里，要把var flag=true;放在定時器里面，就解決了，可是還不太明白為什么

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

收起回答

東方既白233
2017-04-09

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);

});

};

對比一下，你就知道你寫差中間兩句了。

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

收起回答

慕用9244143 提問者

嗯，剛才粘錯文件了，看了別人的提問，我的問題出在JS文件里，要把var flag=true;放在定時器里面，就解決了，可是還不太明白為什么

2017-04-09 回復有任何疑惑可以回復我~

東方既白233
2017-04-09

?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 回復有任何疑惑可以回復我~

收起回答

慕用9244143 提問者
2017-04-09

<!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 回復有任何疑惑可以回復我~

收起回答